js图片预加载
打开网页时，最慢最耗时的就是加载图片。而根据图片大小的不同，加载的时间也不一样。这是就会出现图片一部分加载呈现出来而另一部分还是空白的情况。从整体的体验来讲，这使得用户体验大大的降低了。
而图片的预加载能很好的解决这一问题。
这时，一般都会用到js里边的Image对象。
function preLoadImg(url) {
var img = new Image();
img.src = url;
}
window.onload=function (){
var oDiv=document.getElementById("div1");
var loading=document.getElementById("loading"); //一个loading页面
var arrImg=[];
for (var i=0; i<arr.length; i++){
var oImg=new Image();
oImg.src=arr[i];
oImg.onload=function (){
arrImg.push(this); //已经加载的就推入数组
loading.innerHTML="已加载"+arrImg.length+"/"+arr.length; //计算预加载了百分之多少
if (arrImg.length==arr.length){ //加载百分百
loading.style.display="none"; //loading也隐藏
for (var i=0; i<arrImg.length;i++){
oDiv.appendChild(arrImg[i]); //用DOM将图片插入页面中
}
}
}
}
}
总结：整个预加载过程中图片早已经被加载完成，最后由DOM一起插入页面中显示出来，改善页面的用户体验。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
