源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Javascript实现图片懒加载插件的方法

  • 时间:2022-07-31 15:39 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Javascript实现图片懒加载插件的方法
[b]前言[/b] 网络上各大论坛,尤其是一些图片类型的网站上,在图片加载时均采用了一种名为懒加载的方式,具体表现为,当页面被请求时,只加载可视区域的图片,其它部分的图片则不加载,只有这些图片出现在可视区域时才会动态加载这些图片,从而节约了网络带宽和提高了初次加载的速度,具体实现的技术并不复杂,下面分别对其说明。 Web 图片的懒加载就是通过读取img元素,然后获得img元素的[code]data-src[/code](也可以约定为其他属性名)属性的值,并赋予img的[code]src[/code],从而实现动态加载图片的机制。 [b]这里需要注意的是:[/b] img在初始化的时候不要设置[code]src[/code]属性,因为即使设置 [code]src='' [/code]浏览器也会尝试加载图片。 [b]一个简单的图片懒加载共涉及两个方面[/b] [b]1. HTML 约定[/b] 我们首先需要给准备实施懒加载的[code]img[/code]元素添加指定的[code]class [/code]这里为[code]m-lazyload [/code],同时将[code]img src[/code]赋值给 [code]data-src[/code]属性。 具体示例为:
<img class="m-lazyload" data-src="imgUrl">
[b]2. JavaScript 实现[/b] 动态加载总共分为以下几个步骤,这里每个步骤都将被拆分为独立的函数 [b]1. 添加页面滚动监听事件[/b]
window.addEventListener('scroll', _delay, false);

function _delay() {
 clearTimeout(delay);
 delay = setTimeout(function () {
 _loadImage();
 }, time);
}
[b]2. 当触发监听事件时会执行 _loadImage 函数,该函数负责加载图片[/b]
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);
 }
 }
}
虽然执行了[code]_loadImage[/code]函数,但是我们得知道哪些图片需要被加载,这里的判断依据是什么呢? 依据就是判断该图片是否在当前窗口的可视区域内,在这里我们封装一个[code]_isShow[/code]函数来实现
function _isShow(el) {
 var coords = el.getBoundingClientRect();
 return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
}
[b]自此一个图片加载的闭环就形成了[/b] 当网页滚动的事件被触发 -> 执行加载图片操作 -> 判断图片是否在可视区域内 -> 在,则动态将[code]data-src[/code]的值赋予该图片。 太简单了? 事实就是如此!!! 如此简单,不妨扩展一下 添加一些自定义参数,谁都喜欢自定义,不是吗? 支持[code]iScroll[/code], [code]iScroll[/code]是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件。 这里我们做了些优化 图片加载后移除选择器,避免重复判断。 缓存img元素结合,减少[code]dom[/code]元素查询性能损耗 扩展[code]prototype[/code]添加[code]getNode[/code]方法,支持分页数据懒加载(由于我们之前缓存了[code]dom[/code]元素) 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]);
 }
 };
})();
[b]总结[/b] 以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用图片懒加载的时候能有所帮助,如果有有疑问大家可以留言交流。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部