我正在尝试创建一个简单的投资组合页面。我有一个拇指列表和一个图像。当您点击缩略图时,图像会发生变化。
单击缩略图时,我想让图像淡出,等到图像加载完毕,然后淡入。我现在遇到的问题是有些图像非常大,所以它淡出,然后立即淡入,有时在图像仍在加载时。
我想避免使用 setTimeout,因为有时图像加载速度会比我设置的时间快或慢。
这是我的代码:
$(function() {
$('img#image').attr("src", $('ul#thumbs li:first img').attr("src"));
$('ul#thumbs li img').click(function() {
$('img#image').fadeOut(700);
var src = $(this).attr("src");
$('img#image').attr("src", src);
$('img#image').fadeIn(700);
});
});
<img id="image" src="" alt="" />
<ul id="thumbs">
<li><img src="/images/thumb1.png" /></li>
<li><img src="/images/thumb2.png" /></li>
<li><img src="/images/thumb3.png" /></li>
</ul>
最佳答案
你可以这样做:
$('img#image').attr("src", src).one('load',function() {
$(this).fadeIn(700);
}).each(function() {
if (this.complete) $(this).trigger('load');
});
如果图像被缓存,在某些浏览器中 .load()
不会触发,因此我们需要通过检查 .complete
和手动发射负载。 .one()
确保当时是缓存还是加载,load
处理程序只触发一次。
关于javascript - 等到图像加载后再执行功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2465815/