项目作者: Jason-Bai

项目描述 :
implemented image lazyload
高级语言: HTML
项目地址: git://github.com/Jason-Bai/lazyload.git
创建时间: 2018-12-13T01:37:20Z
项目社区:https://github.com/Jason-Bai/lazyload

开源协议:

下载


lazyload

懒加载的实现中,需要两个关键词值,一个是当前可视区域的高度,另一个是元素距离可视区域顶部的高度;

当前可视区域的高度

当前可视区域的高度,在现代浏览器及IE9以上的浏览器中,可以用window.innerHeight属性获取。在低版本IE的标准模式中,可以用document.documentElement.clientHeight获取,这里我们兼容两种情况:

  1. const viewHeight = window.innerHeight || document.documentElement.clientHeight;

元素距离可视区域顶部的高度

元素距离可视区域顶部的高度,我们这里选用 getBoundingClientRect() 方法来获取返回元素的大小及其相对于视口的位置。对此 MDN 给出了非常清晰的解释:

  1. 该方法的返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的 CSS 边框集合
  1. DOMRect 对象包含了一组用于描述边框的只读属性——lefttopright bottom,单位为像素。除了 width height 外的属性都是相对于视口的左上角位置而言的。

显示判断

当元素距离可视区域顶部的高度小于等于当前可视区域的高度,就需要把当前img的data-src添加到img的src上即可。