原生JS实现图片懒加载

最新推荐文章于 2023-01-04 14:46:25 发布

Delicia_Lani

最新推荐文章于 2023-01-04 14:46:25 发布

阅读量181

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_29918313/article/details/100084301

版权

js 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

该文章转自：https://www.jianshu.com/p/9b30b03f56c2

该文章包含知识点（定位父级offsetParent及偏移大小）：https://www.cnblogs.com/xiaohuochai/p/5828369.html

参考了https://www.denpe.com/javascript-images-lazyload/
实现懒加载有很多种方法，但基本原理是相同的，就是当图片出现在浏览器可视区域中时，再把图片的url传给它，也可以在这个时候创建图片，而图片被包裹在一个容器中，比如li或div，图片的url放在其容器的自定义属性data-src中；
考虑到模块的独立，这里不用容器，直接使用img

原理图.png

文章来源：https://www.jianshu.com/p/8e2a73638153
原理：
先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。

这样做能防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
  <style>
    .container{
      max-width: 800px;
      margin:0 auto;
    }
    .container:after{
      content:"";
      display: block;
      clear:both;
    }
    .container img{
      width:50%;
      height:260px;
      float:left;
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img4.imgtn.bdimg.com/it/u=951914923,777131061&fm=26&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=637435809,3242058940&fm=26&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=3990342075,2367006974&fm=200&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=1813891576,1754763093&fm=26&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img4.imgtn.bdimg.com/it/u=1878067600,3935137756&fm=200&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img3.imgtn.bdimg.com/it/u=85690711,3884201894&fm=26&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=3844233833,3942617167&fm=200&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img0.imgtn.bdimg.com/it/u=1846695025,2515725663&fm=26&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img3.imgtn.bdimg.com/it/u=346230831,1833217134&fm=200&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img5.imgtn.bdimg.com/it/u=3478148120,2683867435&fm=26&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img5.imgtn.bdimg.com/it/u=2298824648,1812234339&fm=200&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=4201594846,4178139206&fm=26&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=484389598,819397330&fm=200&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=3729466012,914166979&fm=26&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=354463615,3836278171&fm=200&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img5.imgtn.bdimg.com/it/u=1831250492,3489827059&fm=200&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=779005622,2247570143&fm=200&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=1968229118,3512711019&fm=26&gp=0.jpg">
    <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=1088428253,1150170159&fm=200&gp=0.jpg">
  </div>
  <script>
    // 一开始没有滚动的时候，出现在视窗中的图片也会加载
    start();
    // 当页面开始滚动的时候，遍历图片，如果图片出现在视窗中，就加载图片
    var clock; //函数节流
    $(window).on('scroll',function(){
      if(clock){
        clearTimeout(clock);
      }
      clock = setTimeout(function(){
        start()
      },200)
    })
    function start(){
      $('.container img').not('[data-isLoading]').each(function () {
        if (isShow($(this))) {
          loadImg($(this));
        }
      })
    }
    // 判断图片是否出现在视窗的函数
    function isShow($node){
      // 图片到页面顶端的距离offsetTop《=浏览器滚动条滚过的距离+浏览器可视区域的高度
      return $node.offset().top <= $(window).height()+$(window).scrollTop();
    }
    // 加载图片的函数，就是把自定义属性data-src 存储的真正的图片地址，赋值给src
    function loadImg($img){
      $img.attr('src', $img.attr('data-src'));
      // 已经加载的图片，我给它设置一个属性，值为1，作为标识
      // 弄这个的初衷是因为，每次滚动的时候，所有的图片都会遍历一遍，这样有点浪费，所以做个标识，滚动的时候只遍历哪些还没有加载的图片
      $img.attr('data-isLoading',1);
    }
  </script>
</body>
</html>

判定其加载条件是，当图片距离页面顶端的距离小于浏览器滚动距离加上可视区域高度，即它出现在可视区域时，就加载它；

获取图片距离页面顶端的高度利用offsetTop计算出其距离offsetParent的高度，再循环叠加，最终获取到其距离页面顶端的高度：

//offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
        function getTop(e) {
            var T = e.offsetTop;
            while(e = e.offsetParent) {
                T += e.offsetParent;
            }
            return T;
        }

可视区域高度为

var H = window.innerHeight;

滚动距离为

var S = document.documentElement.scrollTop || document.body.scrollTop;

然后定义赋值函数

function lazyLoad(imgs) {
            var H = window.innerHeight;
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {
                if (H + S > getTop(imgs[i])) {
                    imgs[i].src = imgs[i].getAttribute('data-src');
                }
            }
        }

最后在把页面滚动函数赋值给元素window.onload，在所有元素加载完以后再进行操作，这一步很重要！

window.onload = window.onscroll = function () {
            lazyLoad(imgs);
        }

全部代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片懒加载</title>
</head>

<style>
    img {
        display: block;
    }
</style>

<body>
<div>
    <img src="" data-src="images/girl1.jpg" alt="图片">
    <img src="" data-src="images/girl1.jpg" alt="图片">
    <img src="" data-src="images/girl1.jpg" alt="图片">
    <img src="" data-src="images/girl1.jpg" alt="图片">
    <img src="" data-src="images/girl1.jpg" alt="图片">
    <img src="" data-src="images/girl1.jpg" alt="图片">
    <img src="" data-src="images/girl1.jpg" alt="图片">
    <img src="" data-src="images/girl1.jpg" alt="图片">
    <img src="" data-src="images/girl1.jpg" alt="图片">
    <img src="" data-src="images/girl1.jpg" alt="图片">
    <img src="" data-src="images/girl1.jpg" alt="图片">
    <img src="" data-src="images/girl1.jpg" alt="图片">
    <img src="" data-src="images/girl1.jpg" alt="图片">

</div>
</body>
<script type="text/javascript">

        var imgs = document.querySelectorAll('img');

        //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
        function getTop(e) {
            var T = e.offsetTop;
            while(e = e.offsetParent) {
                T += e.offsetTop;
            }
            return T;
        }

        function lazyLoad(imgs) {
            var H = window.innerHeight;
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {
                if (H + S > getTop(imgs[i])) {
                    imgs[i].src = imgs[i].getAttribute('data-src');
                }
            }
        }

        window.onload = window.onscroll = function () {
            lazyLoad(imgs);
        }


//    var imgs = document.body.querySelectorAll('img'),
//        H = window.innerHeight;  //浏览器视窗高度
//    function lazyload() {
//        var S = document.documentElement.scrollTop || document.body.scrollTop;   //滚动条滚过高度
//        [].forEach.call(imgs, function (img) {
//            if (!img.getAttribute('data-src')) {
//                return
//            }  //已经替换过的跳过
//            if (H + S - 200 > getTop(img)) {    //为达到演示效果，这里H+S减去200，延后加载时机
//                img.src = img.getAttribute("data-src");
//                img.removeAttribute("data-src");
//            }
//        });
//        [].every.call(imgs, function (img) {
//            return !img.getAttribute('data-src')
//        }) && (window.removeEventListener("scroll", lazyload, false));   //完成所有替换后注销事件
//
//    }
//
//    window.addEventListener("scroll", lazyload, false);
//    window.addEventListener("load", lazyload, false);
//
//    function getTop(e) {
//        var T = e.offsetTop;
//        while (e = e.offsetParent) {
//            T += e.offsetTop
//        }
//        return T
//    }


</script>
</html>

下面注释的是比较完善的方法，还有其他实现方法。

Delicia_Lani

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
原生JS实现图片懒加载

该文章转自：https://www.jianshu.com/p/9b30b03f56c2该文章包含知识点（定位父级offsetParent及偏移大小）：https://www.cnblogs.com/xiaohuochai/p/5828369.html参考了https://www.denpe.com/javascript-images-lazyload/实现懒加载有很多种方法，但基本...
复制链接

扫一扫