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

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'
      }
})

如何实现多张图片的延迟加载

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-bottom: 20px;
        height: 160px;
        overflow: hidden;
        background-color: #bbb;
    }
    .imgBox img{
        display: none; /* 图片一开始是隐藏的*/
        width: 100%;
    }
    .container{
        width: 800px;
        margin: 0 auto;
    }
</style>
</head>
<body>
<div class="container">
        <!-- <div class="imgBox">
                <img src="" alt="" data-img="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" >   
        </div> -->
</div>




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

js文件

let $container = $('.container')
    $imgBoxs = null;

// 制造假数据
let str = ``;
// 创造一个长度为20的数组，每一项都用null填充
new Array(20).fill(null).forEach((item,index)=>{//其实就是个for循环
     str += `
            <div class="imgBox">
                   <img src="" alt="" data-img="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" >   
            </div>      
     `
})
$container.html(str)
$imgBoxs = $container.children('.imgBox');

// 多张图片延迟加载
$(window).on('load scroll',function(){
      //获取浏览器底边框到body页顶边的距离
      let $B = $(window).outerHeight() +   $(window).scrollTop(); // 浏览器的可视区一屏幕的高度 + 滚动条卷去的高度
      //循环每一张图片区域，根据当前图片到body页顶边的距离，计算出里面的图片是否加载
      $imgBoxs.each((index,item)=>{
            let $item = $(item);
            $itemA = $item.outerHeight() + $item.offset().top  // 图片的高度 + 图片顶边到页面顶边的距离
            isLoad = $item.attr('isLoad')

            if( $B >= $itemA && isLoad !== 'true'){//如果 浏览器底边到页面顶端的距离 >=  图片底边到页面顶端的距离
                  $item.attr('isLoad',true)
                  //加载当前区域中的图片
                  let $img = $item.children('img') //获得每张图片
                  $img.attr('src',$img.attr('data-img'));//获取自定义属性的值，赋值给src

                  $img.on('load',()=>{
                        //当图片加载成功后，再在页面上显示图片
                        // $img.css('display','block')
                        $img.stop().fadeIn(); // 使图片渐变出来
                  });
            }
      })
})

posted @ 2019-10-16 22:19 javascript9527 阅读(399) 评论(0) 收藏举报

刷新页面返回顶部

javascript9527

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

公告