仓库源文站点原文


title: 图片脚本懒加载 - Lazyload description: 写了一个轻巧的小程序 - Lazyload,100 行代码。加上一个 data-src 属性,能够让页面中的图片懒加载、textarea 中的脚本懒执行,有需要的可以拿过去用用,代码逻辑比较简单,也可以自己增强点功能,比如动态添加懒加载监听等等。 warning: true categories:


注:代码有更新,细节以 github 的 README 说明为准。

写了一个轻巧的小程序 - Lazyload,100 行代码。加上一个 data-src 属性,能够让页面中的图片懒加载、textarea 中的脚本懒执行,有需要的可以拿过去用用,代码逻辑比较简单,也可以自己增强点功能,比如动态添加懒加载监听等等。

<!--more-->

核心代码:

Lazyload.prototype._detectElementIfInScreen = function() {
  if(!this.elements.length) return;
  for (var i = 0, len = this.elements.length; i < len; i++) {
    var ele = this.elements[i];
    var rect = ele.getBoundingClientRect();
    if(rect.top >= Lazyload.DISTANCE && rect.left >= Lazyload.DISTANCE
      && rect.top <= (window.innerHeight || document.documentElement.clientHeight)
      && rect.left <= (window.innerWidth || document.documentElement.clientWidth)) {
      this.loadItem(ele, i);
      this.elements.splice(i, 1);
      i--; len--;
    }
  }
};

这里主要用到了 getBoundingClientRect 这个函数,兼容性没话说,IE6 都兼容,他的作用是获取元素距离视窗上下左右的距离:

Chrome getBoundingClientRect

配置了两个参数:

使用方式:

<script src="https://raw.githubusercontent.com/barretlee/lazyload/master/index.js"></script>

<div class="box">
  <div class="item"><img src data-src="img-path"></div>
  <div class="item"><textarea>alert(1)</textarea></div>
</div>

<script>new Lazyload(".box .item")</script>

请轻点拍砖;)