知识点------图片懒加载实现方式

本文链接：https://blog.csdn.net/COCOLI_BK/article/details/105367904

一、和懒加载相关的API

document.documentElement.clientHeight//获取屏幕可视区域的高度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VrnUxH0u-1586248674028)(https://pic2.zhimg.com/v2-d4efe96b77d0e0f07e7457574d162b2d_r.jpg “API解释”)]

element.offsetTop//获取元素相对于文档顶部的高度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4jnPHPjT-1586248674029)(https://pic3.zhimg.com/80/v2-7c07f86264b2c3eb576d7903dd35ea0e_720w.png “API解释”)]

document.documentElement.scrollTop//获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xnz6Z3g7-1586248674030)(https://pic3.zhimg.com/80/v2-fcc8364e69e9dbd1d5320b8f4e3d5836_720w.jpg “API解释”)]

二、还有一些人不知道怎么实现，我们还是用图来展示一下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XaZODdZo-1586248674031)(https://pic1.zhimg.com/80/v2-af1ab0c5f34e468e8647135c1f9f51e4_720w.jpg “懒加载原理”)]

三、判断公式：

当 offsetTop-scroolTop<clientHeight，则图片进入了可视区内，则被请求。

四、实现代码:


<ul>
  <li><img src="./imgs/default.png" data="./imgs/1.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/2.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/3.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/4.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/5.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/6.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/7.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/8.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/9.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/10.png" alt=""></li>
</ul>

// https://blog.csdn.net/zgjxyszh/article/details/79535086
前言：兼容区别

可视窗口高度：
1. 对于Chrome、Firefox、Opera 以及 Safari： 
window.innerHeight – 浏览器窗口的内部高度 
window.innerWidth – 浏览器窗口的内部宽度 
2.  对于 Internet Explorer 8、7、6、5，即IE8及以下： 
document.documentElement.clientHeight   document.documentElement.clientWidth 
或者 
document.body.clientHeight   document.body.clientWidth 

滚动条高度：
1、各浏览器下 scrollTop的差异 
IE6/7/8： 
对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ； 
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop ； 
Safari: 
safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset ； 
Firefox: 
火狐等等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop ； 
2、获取scrollTop值 
完美的获取scrollTop 赋值短语 ： 
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;


懒加载代码:
   let imgs = document.querySelectorAll('img')
    // 可视区高度
    let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

    function lazyLoad() {
        // 滚动卷去的高度
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        for (let i = 0; i < imgs.length; i++) {
            // 得到图片顶部距离可视区顶部的距离
            let x = clientHeight + scrollTop - imgs[i].offsetTop
            // 图片在可视区内
            if (x > 0 && x < clientHeight + imgs[i].height) {
                imgs[i].src = imgs[i].getAttribute('data-src')
            }
        }
    }
    // 页面初始化时直接调用一下
    lazyLoad();
    // 页面滚动时调用函数
    window.onscroll = function () {
        setTimeout(lazyLoad, 300)
    }

五、第三方库：

简单的JavaScript图像延迟加载库Echo.js
jQuery图片延迟加载插件jQuery.lazyload

Lazy Load 是基于 jQuery 的插件，而 Echo.js 不依赖于 jQuery 或其他 JavaScript 库，可独立使用。并且 Echo.js 非常小巧，压缩后不足 1KB。