这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
最近由于公司项目需要,要利用 Javascript 实现图片懒加载效果,尝试起来发现并不难,于是将自己的实现过程分享出来给大家学习和参考,希望对有需要的朋友们带来一定的帮助,感兴趣的朋友们下面来一起看看吧。
前言
网络上各大论坛,尤其是一些图片类型的网站上,在图片加载时均采用了一种名为懒加载的方式,具体表现为,当页面被请求时,只加载可视区域的图片,其它部分的图片则不加载,只有这些图片出现在可视区域时才会动态加载这些图片,从而节约了网络带宽和提高了初次加载的速度,具体实现的技术并不复杂,下面分别对其说明。
web 图片的懒加载就是通过读取 img 元素,然后获得 img 元素的
(也可以约定为其他属性名)属性的值,并赋予 img 的
- data-src
,从而实现动态加载图片的机制。
- src
这里需要注意的是: img 在初始化的时候不要设置
属性,因为即使设置
- src
浏览器也会尝试加载图片。
- src=''
一个简单的图片懒加载共涉及两个方面
1. html 约定
我们首先需要给准备实施懒加载的
元素添加指定的
- img
这里为
- class
, 同时将
- m-lazyload
赋值给
- img src
属性。
- data-src
具体示例为:
- <img class="m-lazyload" data-src="imgUrl">
2. JavaScript 实现
动态加载总共分为以下几个步骤,这里每个步骤都将被拆分为独立的函数
1. 添加页面滚动监听事件
- window.addEventListener('scroll', _delay, false);
- function _delay() {
- clearTimeout(delay);
- delay = setTimeout(function() {
- _loadImage();
- },
- time);
- }
2. 当触发监听事件时会执行 _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
是一个高性能,资源占用少,无依赖,多平台的 javascript 滚动插件。
- iScroll
这里我们做了些优化
图片加载后移除选择器,避免重复判断。
缓存 img 元素结合,减少
元素查询性能损耗
- dom
扩展
添加
- prototype
方法,支持分页数据懒加载(由于我们之前缓存了
- getNode
元素)
- dom
OK!说了这么多,show me the code 吧!
- (function() {
- var imgList = [],
- // 页面所有img元素集合
- delay,
- // setTimeout 对象
- offset,
- //偏移量,用于指定图片距离可视区域多少距离,进行加载
- time,
- // 延迟载入时间
- _selector; // 选择器 默认为 .m-lazyload
- function _isShow(el) {
- var coords = el.getBoundingClientRect();
- return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
- }
- 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);
- }
- }
- }
- function _delay() {
- clearTimeout(delay);
- delay = setTimeout(function() {
- _loadImage();
- },
- time);
- }
- function ImageLazyload(selector, options) {
- var defaults = options || {};
- offset = defaults.offset || 0;
- time = defaults.time || 250;
- _selector = selector || '.m-lazyload';
- this.getNode();
- _delay(); //避免首次加载未触发touch事件,主动触发一次加载函数
- if (defaults.iScroll) {
- defaults.iScroll.on('scroll', _delay);
- defaults.iScroll.on('scrollEnd', _delay);
- } else {
- window.addEventListener('scroll', _delay, false);
- }
- }
- ImageLazyload.prototype.getNode = function() {
- imgList = [];
- var nodes = document.querySelectorAll(_selector);
- for (var i = 0,
- l = nodes.length; i < l; i++) {
- imgList.push(nodes[i]);
- }
- };
- })();
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用图片懒加载的时候能有所帮助,如果有有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0624/331032.html