javascript - jQuery:单击复选框更改图像

Question

我想在单击复选框时更改图像。在新图像完全加载之前，加载器图像应该出现在当前图像的顶部。加载当前图像的不透明度也应更改为 0.5。

因此，该函数应包括以下步骤:

点击复选框:

• 更改img源

加载时:

• 将当前图像的不透明度设置为 0.5
• 显示loader.gif

加载新图像时:

• 将不透明度改回 1.0
• 隐藏loader.gif
• 显示新图片

如何使用 jQuery 完成此操作？

提前感谢所有建议!

Answer 1

步骤其实应该是

1. 点击复选框，开始预加载新图片
   首先创建一个 Image 对象，然后将其 load 属性设置为一个函数，该函数将在图像完全加载后调用。然后(设置加载属性后)将我们创建的 Image 对象的 src 属性设置为图像的 Url。

2. 等待时，设置不透明度，显示加载程序
   您可以使用 css 属性 opacity 控制不透明度。您应该已经在页面中隐藏了加载器，并在预加载过程中显示它。

3. 预加载完成后隐藏预加载器，显示图像重置不透明度
   我们为 load 属性定义的函数被调用，在处理程序中我们重置不透明度，隐藏预加载器并将页面中元素的 src 设置为 我们创建的 Image 对象的 src..

这是一个完整的例子:http://www.jsfiddle.net/kqC9U/