jQuery:在复选框上更改图像单击
提问于 2010-10-12 07:14:09
单击复选框时，我希望更改图像。在新图像完全加载之前，加载程序图像应该出现在当前图像的顶部。加载时，当前图像的不透明度也应更改为0.5。
因此，该职能应包括以下步骤：
在复选框中单击：
- 更改img src
装货时：
- 将当前图像的不透明度设置为0.5
- Display loader.gif
加载新图像时：
loader.gif
- Display
- 将不透明度更改为1.0
- 隐藏新图像
如何使用jQuery来完成这一任务？
谢谢您的所有建议！
回答 2
Stack Overflow用户
回答已采纳
发布于 2010-10-12 07:37:36
这些步骤实际上应该是
- on复选框单击，开始预加载新图像。
首先创建Image对象，然后将其load属性设置为将在图像完全加载后调用的函数。然后(在设置load属性之后)将我们创建的图像对象的src属性设置为图像的Url。
您可以使用css属性opacity控制不透明度。您应该已经在页面中安装了加载程序，但是它是隐藏的，并且在预加载处于progress..
- when时只显示它，预加载完全隐藏预加载器，显示图像重置不透明度。
我们为load属性定义的函数被调用，在处理程序中我们重置不透明度，隐藏预加载程序，并将页面中元素的src设置为我们创建的src对象..
下面是一个完整的示例：http://www.jsfiddle.net/kqC9U/
Stack Overflow用户
发布于 2010-10-12 07:23:53
好吧，让我们快速分析一下这个问题：
如果您更改映像源(这几乎可以立即完成)，为什么需要加载器gif？实际上，显示加载程序gif所需的时间与显示新图像一样长。如果您希望加载器给出戏剧性的呼吁，您可以显示loader.gif，等待5秒，然后更改为新的图像。
更改映像可以通过更改当前映像上的src属性来轻松完成。例如,
$.('#myCheckboxID').change(function()
{
$.('#myPictureID').attr('src', "path/to/new/image/");
});如果你觉得你需要装载机给我看戏剧效果，我会帮你把它装好
编辑:因为加载效果是需要的，请尝试如下所示。我会写下一些psuedocode，如果不够具体请告诉我。
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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3916148
复制相关文章
腾讯云开发者
