Question

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

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

点击复选框，点击：

更改img src

加载时：

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

加载新图片时：

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

如何使用jQuery完成这项工作？

提前感谢所有提案！

Answer 1

步骤实际应该是

点击复选框后，开始预加载新图片
首先创建一个Image对象，然后将其load属性设置为一个函数，该函数将在图像完全加载后调用。然后（在设置加载属性之后）将我们创建的Image对象的src属性设置为图像的Url。
等待时，设置不透明度，显示装载机
您可以使用css属性opacity控制的不透明度。你应该已经在页面中加载了加载器但是隐藏了，只需在预加载过程中显示它。
预加载完成时隐藏预加载器，显示图像重置不透明度
我们为load属性定义的函数被调用，在处理程序中我们重置不透明度，隐藏预加载器并将页面中元素的src设置为图像的src我们创建的对象..

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

Answer 2

好吧，让我们快点解决问题：

如果您更改图像源（几乎可以立即完成），为什么还需要加载程序gif？事实上，显示加载程序gif需要与显示新图像一样长。如果您希望加载器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

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

2 个答案: