图片预加载:
var img=new Image();
img.src="AAA.jpg";
img.src="BBB.jpg";
img.src="CCC.jpg";
对于这种预加载的方式,我想请问是先加载完AAA,再执行img.src="BBB.jpg";以及后面的语句,还是一边加载一边执行呢?
如果是后者,我想请问,如果img.src="BBB.jpg";加载BBB的时候,前面的AAA还没加载完,那会出现冲突么?
请指教!~谢谢~~~
var img=new Image();
img.src="AAA.jpg";
img.src="BBB.jpg";
img.src="CCC.jpg";
对于这种预加载的方式,我想请问是先加载完AAA,再执行img.src="BBB.jpg";以及后面的语句,还是一边加载一边执行呢?
如果是后者,我想请问,如果img.src="BBB.jpg";加载BBB的时候,前面的AAA还没加载完,那会出现冲突么?
请指教!~谢谢~~~
<head>
</head>
<body>
<script>
var startTime,endTime;
var d=new Date();
startTime=d.getTime(); var img=new Image();
img.src="http://img4.cache.netease.com/photo/0001/2010-11-14/900x600_6LENIIP605RQ0001.jpg";
img.src="http://img3.cache.netease.com/photo/0001/2010-11-14/900x600_6LENILTG05RQ0001.jpg";
img.src="http://img4.cache.netease.com/photo/0086/2010-11-25/6MBC5I5Q49NE0086.jpg";
img.src="http://img3.cache.netease.com/photo/0086/2010-11-25/6MBD3J6849NE0086.jpg";
img.src="http://img4.cache.netease.com/photo/0086/2010-11-25/6MBFBEBG49NE0086.jpg";d=new Date();
endTime=d.getTime();
document.write((endTime-startTime)/1000);
</script>OK
</body>
</html>
再看下浏览器缓存，结果只下载了最后一张图片。我是在IE8下测试的。所以这样做预加载恐怕不行吧.
用比较傻的方法可以这样：
var img1=new Image(); img1.src="图片地址";
var img2=new Image(); img2.src="图片地址";
var img3=new Image(); img3.src="图片地址";
var img4=new Image(); img4.src="图片地址";
我也是刚试过的，不知道理论是否跟我测试的结果一样。
new Image().src = "b.jpg";
new Image().src = "c.jpg";
我刚刚试了下,好像的确是你所说的那样.
既然是这样的话,我想问问,意思是不是:
同一个Image对象,连续发出加载请求,那么如果前面的请求还没完成的话,后面的请求会把前面的请求取消吗?因此最后才会只加载最后一个图像?
请指教!~谢谢~~
$(document).ready(function() {
jQuery.preloadImages = function()
{
for(var i = 0; i").attr("src", arguments[i]);
}
};
// how to use
$.preloadImages("image1.jpg");
});
jQuery延时加载功能
$(document).ready(function() {
window.setTimeout(function() {
// do something
}, 1000);
});
点击这里.还有更多
return document.getElementById(o) || o
}
$.ImagerProLoad = function() {
var arr = Array.prototype.slice.call(arguments),
Img = new Image(), Idx = 0, Max = arr.length- 1;
Img.src = arr[Idx];
Img.onload = function() {
Idx ++;
Idx < Max ? function() {
setTimeout(function(){Img.src = arr[Idx]}, 5);//取消该延时，会造成堆栈溢出。
}() : function() {
typeof arr[Max] == "function" && arr.pop()(arr) || eval(arr.pop()).apply(arr);
Img = null;
return
}();
}
}调用：
window.callback = function() {
//alert(this);
do someth.
..........
}
$.ImagerProLoad("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","callback");
或者：
$.ImagerProLoad(
"1.jpg","2.jpg","3.jpg","4.jpg",
"5.jpg","6.jpg","7.jpg","8.jpg",
function(orr){
//alert(orr)
do someth.
..........
}
)
可以考虑用JQ的ImagesLazyLoad插件。效果还不错！