你的位置:首页 > 软件开发 > 网页设计 > 网页加载加速 之 图片延迟加载

网页加载加速 之 图片延迟加载

发布时间:2017-06-22 00:00:21
大家还在为网页加载速度而烦恼吗?大家有发现网页在某些浏览器很快,而在某些浏览器却很慢吗?今天向大家介绍一下为何会出现这些情况,并给大家分享一下具体的实现方法1.先向大家讲解一下为何需要图片延迟加载大家知道图片的常见格式吧,图片就是一个把一点一点像素组合在一起的一组像素,图片它像素 ...

网页加载加速 之 图片延迟加载

大家还在为网页加载速度而烦恼吗?大家有发现网页在某些浏览器很快,而在某些浏览器却很慢吗?今天向大家介绍一下为何会出现这些情况,并给大家分享一下具体的实现方法

1.先向大家讲解一下为何需要图片延迟加载

大家知道图片的常见格式吧,图片就是一个把一点一点像素组合在一起的一组像素,图片它像素越多大小越大。一般的图片都有几kb,几十kb,大的几mb都有。这样设想如果你的图片是10kb,那么延不延迟无所谓了吧,但是如果是几十kb或者几百kb呢,让用户多等几秒?总不能因为一张图片,让用户等待几十秒才能看的内容吧?

2.图片延迟加载的实现

其实,图片延迟加载这个功能已经不是很少见了,而且部分浏览器已经实现浏览器延迟加载图片了,但是不支持的浏览器怎么办?

那么我就自己想办法,好!废话就不多说了,先贴上代码:

 1 /* 2 *      图片延迟加载器 3 *  优新世纪工作室-恋空 编写 4 * 5 */ 6  7 // 8 //  window.imageList=[ 9 //    { id:"图像1ID", url:"URL", onload=加载函数 },10 //    { id:"图像2ID", url:"URL", onload=加载函数 },11 //    { id:"图像3ID", url:"URL", onload=加载函数 },12 //    ....13 //  ];14 15 //在页面加载完成后调用 onLoadImage();16 17 function onLoadImage()18 {19   var i=0;20   if(window.imageList){21     //if(typeof window.imageList != "array")22     //  return;23     for(i=0;i<window.imageList.length;i++){24       var now=window.imageList[i];25       var id,url,onloadfn;26       if(now.id){27         id=now.id;28       }29       if(now.url){30         url=now.url;31       }32       if(now.onload){33         onloadfn=now.onload;34       }35       if(id == null || url == null){36         continue;37       }38       var nelement = document.getElementById(id);39       nelement.src = url;40       if(onloadfn)41         (onloadfn)(nelement,url);42       id = url = onloadfn = null;43     }44   }45   console.log("All Image is loaded!Total "+i+" Image!");46   if(window.onImageAllLoad)47     (window.onImageAllLoad)();48 }

原标题:网页加载加速 之 图片延迟加载

关键词:图片

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。