Google Chrome：对缓存图片不执行.load()事件的探讨

.load()事件：.load() – jQuery API

观看演示：http://www.caiguanhao.com/thewordpress/wp-content/uploads/2011/09/ChromeCachedImages.swf

上述演示中图片显示的部分相关代码如下：

$(function(){
	var phsid=0;
	$('.photo img').hide().load(function(){
		phsid+=1;
		$(this).delay(phsid*50).fadeIn();
	});
});

Google Chrome会缓存照片，导致有时只执行到 hide() 忽略执行 load()，导致演示中的图像没有显示出来。

jquery.imagesloaded 可以解决这个缓存问题，但是它不会每张图片逐次执行，用这个方法的话全部图片就一齐淡入，不像演示中的逐张淡入：

$(function(){
	var phsid=0;
	$('.photo img').hide().imagesLoaded(function(){
		phsid+=1;
		$(this).delay(phsid*50).fadeIn();
	});
});

于是我用了 interval 对其进行监视，如果不直接执行 load() 就另外执行跟 load() 相同的代码：

$(function(){
	var phsid=0;
	$('.photo img').hide().load(function(){
		phsid+=1;
		$(this).delay(phsid*50).fadeIn();
	});
	var ss=setInterval(function(){
		if(phsid==0){
			$('.photo img').each(function(){
				phsid+=1;
				$(this).delay(phsid*50).fadeIn();
			});
		}else{
			clearInterval(ss);
		}
	},500);
});

这样虽然有500毫秒的感觉误差，但是这样就不会出现缓存图片怪状，也遵循了我原本的意愿（逐张图片淡入）。

另，貌似在Firefox不会出现这个问题。

No related posts.