jquery实现异步加载图片（懒加载图片一种方式）

2023年6月25日上午10:15 • other

下面是详细讲解"jquery实现异步加载图片（懒加载图片一种方式）"的完整攻略：

1. 什么是懒加载？

懒加载，顾名思义就是“懒”，当我们打开网页时，并不会一下子加载所有的图片资源，而是将一部分图片资源的图片地址保存在data-属性中，当滚动鼠标滑轮浏览页面时，再根据用户的浏览行为，来决定何时加载图片。

懒加载的好处在于，可以避免因为图片资源的过多，导致网页加载过慢的情况，加速页面的加载速度。

2. 如何使用jquery实现懒加载？

以下是一段使用jquery实现懒加载的代码，可以根据实际需求进行修改和优化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery懒加载图片</title>
    <style>
        /*占位符*/
        .image-placeholder{
            width: 100%;
            height: 50px;  /*设置占位高度*/
            background-color: #f5f5f5;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <h1>jquery实现懒加载图片</h1>

    <!--图片占位符-->
    <div class="image-placeholder"></div>
    <div class="image-placeholder"></div>
    <div class="image-placeholder"></div>
    <div class="image-placeholder"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function () {
            //获取窗口对象
            var $window = $(window);

            //获取要懒加载的图片
            var $images = $("img[data-src]");

            //如果没有要懒加载的图片，直接返回
            if ($images.length === 0) return;

            //定义加载图片函数
            function lazyLoadHandler() {
                //获取可视区域的高度
                var scrollTop = $window.scrollTop();
                var windowHeight = $window.height();

                //遍历要懒加载的图片
                $images.each(function () {
                    var $img = $(this);

                    //获取图片距离文档顶部的高度
                    var imgTop = $img.offset().top;

                    //如果该图片在可视区域内
                    if (imgTop < scrollTop + windowHeight) {
                        //将data-src属性的值赋值给src属性
                        $img.attr("src", $img.data("src"));

                        //移除data-src属性
                        $img.removeAttr("data-src");
                    }
                });
            }

            //触发图片加载
            $window.on("scroll", lazyLoadHandler);
            $window.on("load", lazyLoadHandler);
            $window.on("resize", lazyLoadHandler);
        });
    </script>
</body>
</html>

代码说明：

先定义一个图片的占位符，让页面能够先展示图片的数量
然后我们在需要懒加载的图片标签上添加一个data-src属性，该属性的值表示图片的地址
在js中，我们获取窗口对象和要懒加载的图片，以及编写一个加载图片的函数，当用户滚动鼠标滑轮时，判断哪些图片需要加载，并加载图片。

3. 懒加载示例1

下面是一段图片的代码，使用了懒加载技术：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片懒加载实例1</title>
    <style>
        /*占位符*/
        .image-placeholder{
            width: 100%;
            height: 50px;  /*设置占位高度*/
            background-color: #f5f5f5;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <h1>图片懒加载实例1</h1>

    <!--图片占位符-->
    <div class="image-placeholder"></div><div class="image-placeholder"></div><div class="image-placeholder"></div><div class="image-placeholder"></div>

    <!--使用懒加载技术加载图片-->
    <img src="images/download.png" alt="" width="300" height="400" data-src="images/download.png">
    <img src="images/download.png" alt="" width="300" height="400" data-src="images/download.png">
    <img src="images/download.png" alt="" width="300" height="400" data-src="images/download.png">
    <img src="images/download.png" alt="" width="300" height="400" data-src="images/download.png">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function () {
            //获取窗口对象
            var $window = $(window);

            //获取要懒加载的图片
            var $images = $("img[data-src]");

            //如果没有要懒加载的图片，直接返回
            if ($images.length === 0) return;

            //定义加载图片函数
            function lazyLoadHandler() {
                //获取可视区域的高度
                var scrollTop = $window.scrollTop();
                var windowHeight = $window.height();

                //遍历要懒加载的图片
                $images.each(function () {
                    var $img = $(this);

                    //获取图片距离文档顶部的高度
                    var imgTop = $img.offset().top;

                    //如果该图片在可视区域内
                    if (imgTop < scrollTop + windowHeight) {
                        //将data-src属性的值赋值给src属性
                        $img.attr("src", $img.data("src"));

                        //移除data-src属性
                        $img.removeAttr("data-src");
                    }
                });
            }

            //触发图片加载
            $window.on("scroll", lazyLoadHandler);
            $window.on("load", lazyLoadHandler);
            $window.on("resize", lazyLoadHandler);
        });
    </script>
</body>
</html>

这里使用了一个大小为300x400的png图片，这张图片用于占位，在第二次滚动鼠标之后，才加载实际的图片。可以打开开发者工具的network查看效果。

4. 懒加载示例2

以下是一个更完整的懒加载示例，我们将在页面上使用多张图片，在用户滚动过程中加载尚未看到的那些图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片懒加载实例2</title>
    <style>
        img{
            margin-bottom: 20px;
            border: 1px solid #ccc;
        }

        .image-placeholder{
            width: 100%;
            height: 100px;
            background-color: #f5f5f5;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>图片懒加载实例2</h1>

    <!--图片占位符-->
    <div class="image-placeholder"></div><div class="image-placeholder"></div><div class="image-placeholder"></div><div class="image-placeholder"></div>

    <!--使用懒加载技术加载图片-->
    <img src="https://cdn.pixabay.com/photo/2021/11/01/09/29/bicycle-6992616_960_720.jpg" alt="" width="400" height="267" data-src="https://cdn.pixabay.com/photo/2021/11/01/09/29/bicycle-6992616_960_720.jpg">
    <img src="https://cdn.pixabay.com/photo/2021/11/01/09/29/bicycle-6992616_960_720.jpg" alt="" width="400" height="267" data-src="https://cdn.pixabay.com/photo/2021/11/01/09/29/bicycle-6992616_960_720.jpg">
    <img src="https://cdn.pixabay.com/photo/2021/11/01/09/29/bicycle-6992616_960_720.jpg" alt="" width="400" height="267" data-src="https://cdn.pixabay.com/photo/2021/11/01/09/29/bicycle-6992616_960_720.jpg">
    <img src="https://cdn.pixabay.com/photo/2021/11/01/09/29/bicycle-6992616_960_720.jpg" alt="" width="400" height="267" data-src="https://cdn.pixabay.com/photo/2021/11/01/09/29/bicycle-6992616_960_720.jpg">
    <img src="https://cdn.pixabay.com/photo/2021/11/01/09/35/bridge-6992768_960_720.jpg" alt="" width="400" height="267" data-src="https://cdn.pixabay.com/photo/2021/11/01/09/35/bridge-6992768_960_720.jpg">
    <img src="https://cdn.pixabay.com/photo/2021/11/01/09/35/bridge-6992768_960_720.jpg" alt="" width="400" height="267" data-src="https://cdn.pixabay.com/photo/2021/11/01/09/35/bridge-6992768_960_720.jpg">
    <img src="https://cdn.pixabay.com/photo/2021/11/01/09/35/bridge-6992768_960_720.jpg" alt="" width="400" height="267" data-src="https://cdn.pixabay.com/photo/2021/11/01/09/35/bridge-6992768_960_720.jpg">
    <img src="https://cdn.pixabay.com/photo/2021/11/01/09/35/bridge-6992768_960_720.jpg" alt="" width="400" height="267" data-src="https://cdn.pixabay.com/photo/2021/11/01/09/35/bridge-6992768_960_720.jpg">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function () {
            //获取窗口对象
            var $window = $(window);

            //获取要懒加载的图片
            var $images = $("img[data-src]");

            //如果没有要懒加载的图片，直接返回
            if ($images.length === 0) return;

            //定义加载图片函数
            function lazyLoadHandler() {
                //获取可视区域的高度
                var scrollTop = $window.scrollTop();
                var windowHeight = $window.height();

                //遍历要懒加载的图片
                $images.each(function () {
                    var $img = $(this);

                    //获取图片距离文档顶部的高度
                    var imgTop = $img.offset().top;

                    //如果该图片在可视区域内
                    if (imgTop < scrollTop + windowHeight) {
                        //将data-src属性的值赋值给src属性
                        $img.attr("src", $img.data("src"));

                        //移除data-src属性
                        $img.removeAttr("data-src");
                    }
                });
            }

            //触发图片加载
            $window.on("scroll", lazyLoadHandler);
            $window.on("load", lazyLoadHandler);
            $window.on("resize", lazyLoadHandler);
        });
    </script>
</body>
</html>

这个示例使用了来自pixabay平台的两张不同的图片。可以打开开发者工具，network中可以查看加载的图片。

总结：我们可以通过jquery编写代码，实现图片的懒加载，让用户在体验到美好的感官效果的同时，也得到了更佳的页面加载速度。加强了用户对我们网站的体验和信任。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现异步加载图片（懒加载图片一种方式） - Python技术站

other

0 0 打赏

微信扫一扫

支付宝扫一扫

SpringBoot实现多环境配置文件切换教程详解

上一篇 2023年6月25日

RSync实现文件同步备份配置详解

下一篇 2023年6月25日

C#微信开发（服务器配置）

C#微信开发（服务器配置）微信开发是指将微信公众号、微信小程序等与其他服务、网站进行连接，实现用户信息同步、消息推送等功能。在进行微信开发时，需要先进行服务器配置，才能将网站与微信公众号等进行连接。以下是C#微信开发中的服务器配置攻略： 1.获取开发者ID及密钥在使用微信开发功能前，需要申请微信开发者账号，并获取开发者ID及密钥。操作步骤如下： 1.访…

other 2023年6月26日
000
PHP实现将汉字转换为拼音及获取词语首字母的方法

PHP实现将汉字转换为拼音及获取词语首字母的方法在PHP中，可以使用第三方库来实现将汉字转换为拼音以及获取词语首字母的功能。下面是使用 Overtrue/Pinyin 库的示例代码：步骤一：安装依赖库首先，需要使用Composer来安装 Overtrue/Pinyin 库。在终端中执行以下命令： composer require overtrue/pi…

other 2023年8月18日
000
camunda工作流引擎简单入门

Camunda工作流引擎简单入门 Camunda是一个开源的工作流引擎，能够帮助用户轻松地设计、自动化和优化业务流程。在本文中，我们将介绍一些基本的概念和步骤，以帮助您快速入门Camunda工作流引擎。安装和启动Camunda 首先，你需要下载和安装Camunda。可以通过官方网站https://camunda.com/download/下载和安装。安装完…

其他 2023年3月28日
000
C++ 静态成员的类内初始化详解及实例代码

如题所述，本文将详细讲解关于C++中静态成员的类内初始化的整个流程。在本文的实现过程中，我们将会提供两个示例来帮助读者更好的理解和掌握相关内容。一、静态成员变量概述在开始讲解静态成员的类内初始化之前，我们先来了解一下静态成员变量的概念。静态成员变量是属于所有类的实例共享的，不同的对象可以访问相同的静态成员变量，同时，静态成员变量声明时不需要在类外部再进行…

other 2023年6月20日
000
使用Linux五年积累的一些经验技巧

使用Linux五年积累的一些经验技巧攻略 1. 熟悉基本命令行操作熟悉基本的命令行操作是使用Linux的关键。以下是一些常用的命令和技巧： ls：列出当前目录下的文件和文件夹。 cd：切换目录。 mkdir：创建新的文件夹。 rm：删除文件或文件夹。 cp：复制文件或文件夹。 mv：移动文件或文件夹。 grep：在文件中搜索指定的字符串。 chmod：修改…

other 2023年8月15日
000
在vue中封装可复用的组件方法

在Vue中封装可复用的组件方法是一个非常常见的需求。以下是实现这个目标的完整攻略： 1.组件化首先，我们需要按照Vue的“组件化”思想，将页面划分为一些小的、可复用的组件。每个组件只负责显示自身的内容，通过组合这些小组件来构建整个页面。 2.公共方法接着，我们需要考虑哪些代码是可以被封装成公共方法的。这些方法可以是与UI无关的纯函数，也可以是处理UI逻辑…

other 2023年6月25日
000
Java 限制子类访问的方法分析

Java 限制子类访问的方法分析在Java中，通过访问修饰符（public、private、protected）来控制方法和变量的访问权限。其中，private修饰的方法只能在当前类中被访问，而protected修饰的方法则可以被子类中的方法访问。然而，在某些情况下，我们希望将一个方法只作为父类内部使用，不允许子类继承并访问。那么，我们该怎么做呢？接下来…

other 2023年6月26日
000
arcgis属性表.dbf文件使用excel打开中文乱码的解决方法

arcgis属性表.dbf文件使用excel打开中文乱码的解决方法在 ArcGIS 中，我们经常需要打开属性表.dbf 文件进行数据分析或数据处理。然而在使用 Excel 打开属性表.dbf 文件时，可能会出现中文乱码的情况。以下是解决这个问题的方法。方法一：更改文件编码 1.在电脑中找到需要打开的属性表.dbf 文件，右键点击“属性”选项。 2.在“属…

其他 2023年3月28日
002

jquery实现异步加载图片（懒加载图片一种方式）

1. 什么是懒加载？

2. 如何使用jquery实现懒加载？

3. 懒加载示例1

4. 懒加载示例2

相关文章