编写代码实现图片的懒加载

1 前端性能优化的重要方案，通过图片或者数据的延迟加载，我们可以加快页面的渲染的速度，让我们第一次打开页面的速度变快

2 只有滑动到某个区域，我们才加载真实的图片，这样也可以节省加载的流量

如何实现图片懒加载

把所有需要延迟加载的图片用一个盒子包起来，设置宽高和默认的占位图，

开始让所有的img的src为空，把真实图片的地址放到img的自定义属性上，让img隐藏

等待所有其他资源都加载完之后，我们再开始加载图片

等于很多图片，需要当页面滚动的时候，当前图片区域完全显示出来后在加载真实图片

单张图片的延迟加载，当图片进入显示区在加载

html代码

<!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>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .imgBox{
        margin: 1000px auto;
        width: 300px;
        height: 100px;
        overflow: hidden;
        background-color: #bbb;
    }
    .imgBox img{
        display: none; /* 图片一开始是隐藏的*/
        width: 100%;
    }
</style>
</head>
<body>
<div class="imgBox">

        <img src="" alt=""
            data-img="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"
        >
        
</div>


<script src="/jquery-3.2.1.js"></script>
<script src="/01.js"></script>
</body>
</html>

js文件

let $imgBox = $('.imgBox'),
    $img = $imgBox.children('img'); 
// jq中的事件绑定支持多事件绑定：window.onload  &  window.onscroll  两个事件触发的时候执行相同的事情
// load当页面中所有资源都加载完成之后触发，scroll浏览器滚动触发
// $imgBox.outerHeight() 表示 获取$imgBox元素的高度 （当前元素的高度）
// $imgBox.offset()  表示  获取$imgBox元素顶部距离body页面顶部/左边的距离
// $(window).outerHeight()表示浏览器的高度
// $A 图片底边到页面顶部的距离 = 图片的高度 + 图片顶边到页面顶边的距离
// $B 浏览器底边到页面顶边的距离 = 浏览器的可视区一屏幕的高度 + 滚动条卷去的高度
$(window).on('load scroll',function(){
      if($img.attr('isLoad')==='true'){
            return; // 如果加载过就不会再加载
      }

            //    图片的高度 + 图片顶边到页面顶边的距离
      let $A = $imgBox.outerHeight() + $imgBox.offset().top
            //    浏览器的高度（一屏幕高） +  滚动条卷去的高度
      let $B = $(window).outerHeight() +   $(window).scrollTop();

      if( $A <= $B){ //  如果 图片底边到页面顶部的距离 <=  浏览器底边到页面顶边的距离就加载真实图片
            // 加载真实图片
            $img.attr('src',$img.attr('data-img'));//获取自定义属性的值，赋值给src
            $img.on('load',function(){
                  //当图片加载成功后，再在页面上显示图片
                  // $img.css('display','block')
                  $img.stop().fadeIn(); // 使图片渐变出来
            });
            $img.attr('isLoad',true)  // attr储存自定义属性值都是字符串格式'true'
      }
})

编写代码实现图片的懒加载

猜你喜欢