手机网站实现图片惰性加载 手机网页加载
什么是图片惰性加载呢?
顾名思义,惰性指的是我们只将用户视野范围内(浏览器窗口的可视区域)的图片加载,而用户视野范围外的图片先不加载,当用户看到这些图片时再做加载。
这样做的好处在于哪里呢?
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 (subtractionY > minScroll) { 40 var subtractionTime = Date.now() - startSyAndTime.time; 41 setTimeOut = setTimeout(function() { 42 that.changeimg(), 43 startSyAndTime = {}, 44 clearTimeout(setTimeOut), 45 setTimeOut = null 46 }, 47 subtractionTime > slowScrollTime ? 0: 200) 48 } 49 } else { 50 that.changeimg(); 51 } 52 }).on("touchcancel", function() { 53 setTimeOut && clearTimeout(setTimeOut), 54 startSyAndTime = {} 55 }) 56 } else { 57 $(window).on("scroll", function() { 58 that.changeimg(); 59 }); 60 } 61 setTimeout(function() { 62 that.trigger(); 63 },90); 64 65 }, 66 trigger: function() { 67 var that = this; 68 eventType = that.isPhone && "touchend" || "scroll"; 69 that.imglist = $('img.'+that.class+''); 70 $(window).trigger(eventType); 71 }, 72 changeimg: function() { 73 function loadYesOrno(img) { 74 var windowPageYOffset = window.pageYOffset, 75 windowPageYOffsetAddHeight = windowPageYOffset + window.innerHeight, 76 imgOffsetTop = img.offset().top; 77 return imgOffsetTop >= windowPageYOffset && imgOffsetTop - that.sensitivity <= windowPageYOffsetAddHeight; 78 } 79 function loadImg(img, index) { 80 81 var imgUrl = img.attr(that.srcStore); 82 img.attr("src", imgUrl); 83 img[0].onload || (img[0].onload = function() { 84 $(this).removeClass(that.class).removeAttr(that.srcStore), 85 that.imglist[index] = null, 86 this.onerror = this.onload = null 87 }, 88 img[0].onerror = function() { 89 this.src = that.onerrorImgUrl, 90 $(this).removeClass(that.class).removeAttr(that.srcStore), 91 that.imglist[index] = null, 92 this.onerror = this.onload = null 93 }) 94 } 95 var that = this; 96 that.imglist.each(function(index, val) { 97 if (!val) return; 98 var img = $(val); 99 if (!loadYesOrno(img)) return; 100 if (!img.attr(that.srcStore)) return; 101 loadImg(img, index); 102 }) 103 104 } 105 }; 106 lazyLoad.init(); 107 108 }());
如何使用这个脚本呢?
HTML
<!DOCTYPE html> <html> <head> <title>图片惰性演示例子</title> </head> <body> <img class="lazy" dataimg="images/change01.jpg" src="./grey.png"> <img class="lazy" dataimg="images/change02.jpg" src="./grey.png"> <img class="lazy" dataimg="images/change03.jpg" src="./grey.png"> <img class="lazy" dataimg="images/change04.jpg" src="./grey.png"> <img class="lazy" dataimg="images/change05.jpg" src="./grey.png"> <img class="lazy" dataimg="images/change06.jpg" src="./grey.png"> </body> <script src="http://libs.baidu.com/zepto/1.0rc/zepto.min.js"></script> <script src="./lazyload.js"></script> </html>
就像上面的代码一样,很简单。只要在页面底部载入jquery或者zepto(如果你不想依赖这两个库,也很简单,可以改造一下代码,毕竟在移动端不需要处理很多兼容性问题)。然后载入lazyload.js这个脚本。
并按照一下规则来书写你的img标签
<img class="lazy" dataimg="真实大图.png" src="小图.png">
注意事项:图片最好都用样式定义高度,否则图片的高度默认为0,就上面的例子来讲,所有img标签都挤在一起,全部在第一屏,导致程序认为它们都应该加载,就看不到效果了。
好了,高潮和结局终于同时来了。我始终认为demo也需要有赏心悦目的感觉。
推荐阅读
-
手机网站实现图片惰性加载 手机网页加载
-
Android加载大分辨率图片到手机内存中的实例方法
-
https加载http资源,导致ios手机上的浏览器图片加载问题
-
Android加载大分辨率图片到手机内存中的实例方法
-
手机网页加载速度慢?Google推出AMP项目闪电解决
-
css - UC访问php站点图片不能加载出来,但是别的手机浏览器都可以,可能是什么原因,怎么解决?
-
css - UC访问php站点图片不能加载出来,但是别的手机浏览器都可以,可能是什么原因,怎么解决?
-
https加载http资源,导致ios手机上的浏览器图片加载问题
-
加载HTML网页,在网页上文字居中,在手机端用WebView加载出来不居中
-
javascript - 手机web网站中怎么实现 新浪微博APP中滚动条往下滑加载更多数据