jQuery：更改复选框上的图像单击

Question

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

因此，该功能应包括以下步骤：

在复选框上，单击：

• 更改img src

加载时：

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

加载新图像时：

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

jQuery如何做到这一点？

预先感谢所有建议！

Answer 1

这些步骤实际上应该是

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

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

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

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

Answer 2

好吧，让我们花点时间分析一下问题：

如果要更改图像源（几乎可以立即完成），为什么需要加载程序gif？ 实际上，显示加载程序gif所需的时间与显示新图像所需的时间相同。 如果您希望loader gif具有惊人的吸引力，则可以显示loader.gif，等待5秒钟，然后更改为新图像。

更改图像可以轻松地通过更改当前图像上的src属性来完成。 例如，

$.('#myCheckboxID').change(function()
{
    $.('#myPictureID').attr('src', "path/to/new/image/");
});

让我知道是否您决定需要该gif加载器才能产生戏剧性的效果，我会帮助您进行连接

编辑：由于需要加载效果，请尝试类似的操作。 我将写下一些伪代码，让我知道它是否不够具体。

Change the source on your first picture
Hide the first picture for x seconds (get a feel for how long it takes to load)
Unhide a loading gif of the same size with opacity already set
hide the loading gif and unhide the first picture