【前端用法】JavaScript图片懒加载原理及实现（JavaScript实现图片懒加载的方法分析）

一时失言乱红尘 2023-02-10 03:44 12阅读 0赞

**本文目录**

一、懒加载原理

1.1 原理

1.2 目的

二、代码实现

2.1 实现步骤

2.2 JS代码

--------------------

# 一、懒加载原理 #

## 1.1 原理 ##

先将img标签的src链接设为同一张图片，然后给img标签设置自定义属性（比如 **data-original**），然后将真正的图片地址存储在**data-src**中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中，达到懒加载的效果。

## 1.2 目的 ##

这样做能够避免页面一次性向服务器发送大量请求，导致服务器响应变慢，最终导致页面卡顿、崩溃等现象。

# 二、代码实现 #

## 2.1 实现步骤 ##

> 1. 将**img**标签内的**src**属性修改为**data-original**， 给**img**标签添加 **class = "lazy"** 属性；
> 
> 2. 把2.2的JS代码复制到页面上。
> 
> 3. 如果想要实现图片淡出的效果，需要加上如下css样式

## 2.2 JS代码 ##

具体实现的js代码为：

下面为整个HTML页面，请查看：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <link href="" rel="SHORTCUT ICON">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/common.css">
        <link rel="stylesheet" href="css/animate.min.css">
        <link rel="stylesheet" href="css/product-details/smart_home.css">
        <script src="js/jquery.min.js"></script>
        <script src="js/response.js"></script>
        <title>图片懒加载实现方式</title>
        <style>
            img.lazy{
                visibility: visible;
                opacity: 0.00;
                filter: alpha(opacity=0);
                -moz-opacity: 0.0;
            }
        </style>
    </head>
    <body>
    
    <section class="smart-home three">
        <div class="section-content">
            <div class="scene-box">
                <div class="scene-box-item">
                    <div class="scene-box-item-bg"></div>
                    <div class="scene-box-item-content wow slideInUp">
                        <h4>安全升级</h4>
                        <p>设备主动防御、数据分级存储</p>
                        <p>搭载更安全的家</p>
                        <img class="lazy" data-original="images/product-details/smart_home/safe.png">
                    </div>
                </div>
                <div class="scene-box-item">
                    <div class="scene-box-item-bg"></div>
                    <div class="scene-box-item-content wow slideInUp">
                        <h4>舒适升级</h4>
                        <p>更舒适的空气环境</p>
                        <p>更宜人的光环境</p>
                        <img class="lazy" data-original="images/product-details/smart_home/envir.png">
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <script type="text/javascript">
        $(function() {
            imgLazyLoad();//初始化
            $(document).scroll(imgLazyLoad); //当滚动条滚动时,扫描需要加载的div
    
            //扫描需要加载的div
            function imgLazyLoad() {
                $.each($("body img.lazy"), function (i, o) {
                    //获取窗口高度
                    var windowHeight = $(window).height();  //  windowHeight = windowHeight/2; 设置滚动条在显示屏幕高度2分之1的时候加载图片
                    //获取滚动条
                    var scrollTop = $(document).scrollTop();
                    //先判断是否是加载完的图片 跳出
                    if ($(o).attr("src") == $(o).attr("data-original")) {
                        return true;
                    } else if ($(o).offset().top <= (scrollTop + windowHeight) && $(o).offset().top >= scrollTop) {//判断div是不是出在可见的位置
                        if ($(o).attr("data-original") != undefined || $(o).attr("data-original") != "undefined") {
                            var ObjectSrc = $(o).attr("data-original");
                            //把pic的值赋给src值
                            $(o).attr("src", ObjectSrc);
                            //css属性改为可见
                            $(o).css("visibility", "visible");
                            //渐变时间和渐变值
                            $(o).fadeTo(1000, 1.00);
                        }
                    }
                });
            }
        });
    </script>
    </body>
    </html>

完结！