什么是图片惰性加载呢?
顾名思义,惰性指的是我们只将用户视野范围内(浏览器窗口的可视区域)的图片加载,而用户视野范围外的图片先不加载,当用户看到这些图片时再做加载。
这样做的好处在于哪里呢?
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也需要有赏心悦目的感觉。
相关推荐
ocLazyLoad 是 AngularJS 的延迟加载(惰性加载)模块和组件。 主要特性: 自动加载依赖关系 友好的调试器(无eval代码) 混合正常引导和按需加载的能力 通过服务或指令加载
惰性控件ViewStub实现布局东动态加载,在手机页面点击展开按钮,在按钮下方会出现一个页面。常用在查看商品的详细信息。
图片懒加载组件作者:冬玉需求描述背景:由于移动端网速限制, 为加快页面加载速度, 避免产生不必要的流量消耗, 图片采用按需加载方式.设计懒加载组件,需要支持以下几个功能:支持自定义定义组件有效范围支持 scroll...
在浏览网页时经常会碰到图片延迟加载的情况,它的优势在于提高加载速度,未加载前加载图片占位图,接下来为大家详细介绍下,感兴趣的朋友可以参考下哈
Vue图片滑动图库(一个带有缩略图,惰性加载和滑动的图库)由photoswipe支持.zip
图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力,下面通过本文给大家分享图片懒加载lazyload的实现方法,感...
rn-lazy, AngularJS用于图像的惰性加载器 rn懒惰:AngularJS惰性图像加载程序指令用户速度感知对于你的web应用程序来说至关重要。这个指令让你在图片加载时显示一个 Spinner ( 基于图像或者 DOM ) 。自豪地由 @...
今天起床,拿起手机开机第一时间当然是打开微信了,左右滑动Viewpager,发现它使用了一种叫惰性加载,或者说懒加载(lazy-loading)的方式加载Viewpager中的Fragment。效果如图: 什么是lazy-loading呢?顾名思义...
用于实现惰性加载图片的js文件。操作简单方便。用于实现惰性加载图片的js文件。操作简单方便。用于实现惰性加载图片的js文件。操作简单方便。
之前看到网上很多css3 实现的loading动画加载效果 今天懒人站长特意写了一个效果供给大家使用 原理其实是很简单的,大家简单看看即可看懂 特点:无图片、无js,加载速度快 缺点:不支持低版本...
延迟加载也称为惰性加载,即在长网页中延迟加载图像。 用户滚动到它们之前,视口外的图像不会加载。 这与图像预加载相反,在长网页上使用延迟加载将使网页加载更快。 在某些情况下,它还可以帮助减少服务器负载。...
通过查询数据库里面的数据,每一组数据放在一个div盒子里,拖动滚动条实现惰性加载,也称为懒加载。简单的事例,易学易懂。
流星的“惰性加载器”,用于外部.js和.css库 预载是流星什么yepnope.js预先流星时代。 新版本-v1.2.4 各种错误修复 依存关系 在服务器和浏览器上工作的路由器,专门为设计。 TL; DR; 预加载通过以下两个主要功能...
懒树视图 WPF惰性数据加载TreeView
“我很享受阅读这本对实现链接器和加载器的众多技术和挑战进行有效概述的书。虽然书中的多数例子都集中在今天被广泛使用的三种计算机体系结构上,但这本书也包含了很多描述过去的一些有趣和古怪的计算机体系结构的...
通过CableReady未来派的惰性加载Rails局部函数通过CableReady用法的懒加载Rails局部函数与模板自定义中的帮助程序一起使用 (以 或一个 被渲染。 这些自定义元素具有附加的IntersectionObserver,它将把签名的全局ID...
请继续阅读以了解import.js的功能以及可以使用它实现的功能。 待定 删除jqQery依赖->完成 代码审查->完成 测试 性能优化 开始吧 首先在您的模板中包含basket.full.custom.min.js和``import.min.js`''
这些类支持图像元素,图片元素和带有CSS背景图像的元素的加载。 LazyLoad,LazyScroll和LazyProximity LazyLoad是基类,提供事件驱动载荷功能LazyScroll是一个scroll基于事件的扩展,它负载的项目,如它们出现在...