图片惰性加载

手机网站实现图片惰性加载

 

什么是图片惰性加载呢？

顾名思义，惰性指的是我们只将用户视野范围内（浏览器窗口的可视区域）的图片加载，而用户视野范围外的图片先不加载，当用户看到这些图片时再做加载。

这样做的好处在于哪里呢？

1、用户访问速度上升了，浏览器的加载进度条很快就加载完毕。

2、节省用户流量。

那么如何实现呢？

我们需要解决两个问题：① 如何知道用户是否能看见这张图片？② 如何让看不到的图片不加载，而在需要的时候再去加载？

先解决第一个问题：如何知道用户是否能看见这张图片？

首先需要获取三个值，这些都可以通过javascript获取。

①浏览器窗口的高度 windowHeight

②页面滚动的距离    windowPageY

③图片距离页面顶部的距离 imgTop 

那么:

if(imgTop >= windowPageY && imgTop <= (windowPageY+windowHeight)){
　　//图片可见
}

关于上面的条件判断，相信你仔细思考就能看明白。

解决第二个问题：如何让看不到的图片不加载，而在需要的时候再去加载？

所有图片元素的src值先设置为一个很小的图片或者一张“加载中”的图片，而它的真实属性放置在一个自定义属性中如：

<img dataimg="真实大图.png" src="小图.png">

这样浏览器只会去加载小图，而不会去加载大图，而当你所有图片都用同一张小图的时候，这张小图只需要加载一次，所以速度非常快。

当这张图片需要加载了，那么我们只需要将原先放置在自定义属性中的图片地址放置到img标签额src属性中就可以了，接下来浏览器就会去请求并加载这张图片：

<img dataimg="真实大图.png" src="真实大图.png">

 ok，基本原理就是这样，代码细节就不赘述了，直接贴代码。

lazyload.js

  1 (function(){
  2  /**
  3  * 功能:图片惰性加载
  4  * @author haunghm
  5  * @version 1.0.0
  6  * @dependencies jquery 或者 zepto
  7  */
  8 var lazyLoad = {
  9     
 10     init: function() {
 11         var that = this;
 12         that.onerrorImgUrl = "./images/grey.png";//图片加载失败用什么图片替换
 13         that.srcStore      = "dataimg";   //图片真实地址存放的自定义属性
 14         that.class         = "lazy";      //惰性加载的图片需要添加的class
 15         that.sensitivity   = 50;           //该值越小，惰性越强（加载越少）      
 16         
 17         minScroll = 5,
 18         slowScrollTime = 200,
 19         ios = navigator.appVersion.match(/(iPhone\sOS)\s([\d_]+)/),
 20         isIos = ios && !0 || !1,
 21         isoVersion = isIos && ios[2].split("_");
 22     
 23         isoVersion = isoVersion && parseFloat(isoVersion.length > 1 ? isoVersion.splice(0, 2).join(".") : isoVersion[0], 10),
 24         isIos = that.isPhone = isIos && isoVersion < 6;
 25         
 26         if (isIos) {
 27             
 28             var startSyAndTime,
 29             setTimeOut;
 30             $(window).on("touchstart",function() {
 31                 startSyAndTime = {
 32                     sy: window.scrollY,
 33                     time: Date.now()
 34                 },
 35                 setTimeOut && clearTimeout(setTimeOut)
 36             }).on("touchend",function(e) {
 37                 if (e && e.changedTouches) {
 38                     var subtractionY = Math.abs(window.scrollY - startSyAndTime.sy);
 39                     if (subt