|
懒加载的意义及实现方式有:
意义: 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。
实现方式:
-
第一种是纯粹的延迟加载,使用setTimeOut或setInterval进行加载延迟.
-
第二种是条件加载,符合某些条件,或触发了某些事件才开始异步下载。
-
第三种是可视区加载,即仅加载用户可以看到的区域,这个主要由监控滚动条来实现,一般会在距用户看到某图片前一定距离遍开始加载,这样能保证用户拉下时正好能看到图片。
Web 图片的懒加载就是通过读取img元素,然后获得img元素的data-src(也可以约定为其他属性名)属性的值,并赋予img的src,从而实现动态加载图片的机制。
这里需要注意的是: img在初始化的时候不要设置src属性,因为即使设置 src=’’ 浏览器也会尝试加载图片。
一个简单的图片懒加载共涉及两个方面,
1. HTML 约定
我们首先需要给准备实施懒加载的img元素添加指定的class 这里为m-lazyload ,同时将img src赋值给 data-src属性。
具体示例为:
|
2. JavaScript 实现
动态加载总共分为以下几个步骤,这里每个步骤都将被拆分为独立的函数
-
添加页面滚动监听事件
-
window.addEventListener( 'scroll', _delay, false);function _delay() {clearTimeout(delay);delay = setTimeout( function () {_loadImage();}, time);}
-
当触发监听事件时会执行 _loadImage 函数,该函数负责加载图片
-
function _loadImage() {for ( var i = imgList.length; i--;) {var el = imgList[i];if (_isShow(el)) {el.src = el.getAttribute( 'data-src');el.className = el.className.replace( new RegExp( "(\\s|^)" + _selector.substring( 1, _selector.length) + "(\\s|$)"), " ");imgList.splice(i, 1);}}}
虽然执行了_loadImage函数,但是我们得知道哪些图片需要被加载,这里的判断依据是什么呢?
依据就是判断该图片是否在当前窗口的可视区域内,在这里我们封装一个_isShow函数来实现
function _isShow(el) {var coords = el.getBoundingClientRect();return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= ( window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));}自此一个图片加载的闭环就形成了
当网页滚动的事件被触发 -> 执行加载图片操作 -> 判断图片是否在可视区域内 -> 在,则动态将data-src的值赋予该图片。
太简单了?
事实就是如此!!!
如此简单,不妨扩展一下
- 添加一些自定义参数,谁都喜欢自定义,不是吗?
- 支持iScroll, iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件。
这里我们做了些优化
- 图片加载后移除选择器,避免重复判断。
- 缓存img元素结合,减少dom元素查询性能损耗
- 扩展prototype添加getNode方法,支持分页数据懒加载(由于我们之前缓存了dom元素)
OK!说了这么多,show me the code 吧!
-