图片懒加载实现及其原理

作者: 缺月楼 | 来源:发表于2019-05-13 19:03 被阅读0次

图片懒加载实现及其原理
懒加载图片的实现及其原理
懒加载和瀑布流
图片的懒加载和预加载
图片懒加载的使用方法?
项目优化
图片懒加载——实现原理
懒加载
懒加载与瀑布流布局
图片懒加载和预加载

懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。

我们之前看到的懒加载一般是这样的形式：

. 浏览一个网页，准备往下拖动滚动条
. 拖动一个占位图片到视窗
. 占位图片被瞬间替换成最终的图片

我们可以在示例中看到懒加载是如何使用的，网页首先用一张轻量级的图片占位，当占位图片被拖动到视窗，瞬间加载目标图片，然后替换占位图片。
下图所示：

黑色的是占位图片

当用户滚动时将隐藏的图片显示出来（已经进行了优化当用户打开网页时会显示一部分图片）先调用一次 start () 增强用户体验

image.png

当一个元素出现在我们眼前小于窗口高度加上窗口滚动的高度的时候就意味着到达目标点可以开始加载图片或者其他内容

对返回结果进行判断结果为true时开始执行加载任务 start ()

function isShow($node){
          
            return $node.offset().top <= $(window).height() + $(window).scrollTop()
}

完整代码如下：

<!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">
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <title>图片懒加载</title>
</head>
<style>
    .container{
        max-width: 800px;
        margin: 0 auto;
    }
    .container::after {
        content: '';
        display: block;
        clear: both;
    }
    .container img{
        float: left;
        width: 50%;
       
    }
    /* 目标元素 */
    h1 {
        clear: both;
    }

</style>
<body>
    <div class="container">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="1"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="2"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="3"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="4"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="5"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="6"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="7"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="8"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg">
            <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="9"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="10"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="11"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="12"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">       
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="13"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="14"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">     
        <!-- <h1 id="target">hello</h1> -->
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="15"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="16"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="17"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="18"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">  
            <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="15"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="16"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="17"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="18"
            data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">            
    </div>
    <script>
        //滚动事件
          start () //打开页面 调用一次 
        $(window).on('scroll',function(){
            start () //滚动页面是 调用一次   方便管理 
        })
        //加载函数 
        function start (){
            $('.container img').not('[data-isLoaded]').each(function(){
                var $node = $(this)
               if( isShow( $node) ){
                   //缓冲效果 
                    setTimeout(function(){
                    loadIng( $node)
                    },500)
                
               }
            })
        }
        // 页面逻辑
        function isShow($node){
            // 当一个元素出现在我们眼前    小于 窗口高度 加上窗口滚动的高度的时候    就意味着  到达目标点 
            // 可以开始加载图片 或者其他内容
            return $node.offset().top <= $(window).height() + $(window).scrollTop()
            
        }
        // 显示状态
        function loadIng($img){
            // 获取目标元素 并替换 
            $img.attr('src', $img.attr('data-src'))
            //性能优化   进行判断   已经加载的  不会再进行加载  
            $img.attr('data-isLoaded', 1)
        }
    </script>
</body>

</html>

该示例用jQuery 实现，对代码进行最大优化

//性能优化进行判断已经加载的不会再进行重复加载