图像预加载器问题
图像预加载器问题
提问于 2010-09-27 15:45:21
我想出了这段代码，并发现在第一次加载图像时，过渡效果很好，但在第二次加载时，过渡将不会出现。
var imgIndex = 0;
SlideImages();
function SlideImages()
{
$("<img />").attr("src",theImages[imgIndex]).attr("style","display:none;").load(function(){
$(this).appendTo("div.picCon");
$(this).show("<?php echo $portfolioTransition; ?>",<?php echo $effectDuration; ?>,function(){
setTimeout( hideImg,2000);
});
});
}
function hideImg()
{
$("div.picCon img:visible").fadeOut(function(){
$("div.picCon").empty();
imgIndex = (imgIndex<theImages.length)?imgIndex+1:0;
SlideImages();
});
}其中$portfolioTransition =“退回”；$effectDuration = 1000；
如果图像已经在缓存中，有什么方法可以执行吗？或者有没有其他方法可以让我下面的代码正常工作..:)
我让它在safari中工作，但在chrome中不起作用..
function SlideImages()
{
$("<img />").attr("src",theImages[imgIndex]).attr("style","display:none;").one("load",function(){
$(this).appendTo("div.picCon");
$(this).show("<?php echo $portfolioTransition; ?>",<?php echo $effectDuration; ?>,function(){
setTimeout( hideImg,2000);
});
}).each(function(){
if(this.complete)$(this).trigger("load");
});
}回答 2
Stack Overflow用户
回答已采纳
发布于 2010-09-27 16:01:02
引用自jQuery API .load()
如果从浏览器缓存中加载图像，则可能不会触发load事件。
我相信在设置src属性之前设置加载处理程序可能会起到作用。尝试在代码中将它们的链顺序更改为
$("<img />").attr("style","display:none;");
.load(function(){...})
.attr("src",theImages[imgIndex])已更新答案
这里是完整的代码和演示工作正确(我相信) http://www.jsfiddle.net/HkXBw/
所需的更改包括
- 在设置图像的src属性之前设置load事件
- 如果图像已完成加载，则手动激发load事件
- 在绑定load事件时使用one()方法来补偿直接使用#1 (无需#2)和其他浏览器(我们只希望加载触发一次)的不同浏览器。
- 修复您增加图像计数器的方式。
本质上，我们结合了我建议的技巧和您自己的变通方法，但也引入了一个更改，因为每个技巧都可以在不同的浏览器中工作，并且我们只想使用两个技巧中的一个，而不是两个都使用。
Stack Overflow用户
发布于 2010-09-27 15:49:35
jQuery docs中记录了这一点。
如果从浏览器缓存中加载图像，则可能不会触发load事件。为了解决这种可能性，我们可以使用一个特殊的load事件，该事件在图像准备就绪时立即触发。event.special.load目前以插件的形式提供。
Plugin
我自己没有用过它，但是看起来你可以只包含这个插件，而不需要修改你的代码，因为它拦截了常规的load-event。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3801933
复制相关文章
相似问题
腾讯云开发者
