1. Python技术站首页
  2. other

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

• 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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月25日
下一篇 2023年6月25日

相关文章

  • 关于oracle:如何将数据类型clob更改为varchar2(sql)

    在Oracle数据库中，可以使用ALTER TABLE语句将CLOB数据类型更改为VARCHAR2数据类型。以下是将CLOB数据类型更改为VARCHAR2数据类型的完整攻略： 1. 创建新的VARCHAR列 先，需要创建一个新的VARCHAR2列，用于存储CLOB列中的数据。可以使用以下语句创建新的VARCHAR2列： ALTER TABLE table_n…

    other 2023年5月8日
    00

  • 深入浅析vue全局环境变量和模式

    下面是深入浅析Vue全局环境变量和模式的攻略。 什么是Vue全局环境变量 在Vue应用程序中，我们可能要使用一些状态，这些状态在应用程序中需要被许多组件访问。这些状态可以通过引入一个全局变量来实现。在Vue中，这个全局变量被称为Vue.prototype。 我们可以通过Vue.prototype在Vue应用程序中添加全局变量。下面是一个示例，演示如何将一个新…

    other 2023年6月27日
    00

  • 关于sql:蜂巢中的`loaddatainpath`和`location`之间的区别

    在Hive中，我们可以使用LOAD DATA INPATH和LOCATION命令将数据加载到表中。这两个命令之间有一些区别。在本攻略中，我们将详细讲解这两个命令之间的区别，并提供两个示例。 LOAD DATA INPATH命令 LOAD DATA INPATH命令用于将数据从本地文件系统加载到Hive表中。以下是一个示例，演示了如何使用LOAD DATA I…

    other 2023年5月9日
    00

  • Linux系统修改环境变量PATH的技巧图解

    Linux系统修改环境变量PATH的技巧图解 什么是环境变量PATH？ 在Linux系统中，环境变量PATH指的是一个包含多个路径的字符串变量，用于告诉系统在哪些目录中可以找到可执行文件。 例如，当我们在终端中输入一个命令，例如ls，系统会自动在PATH路径中定义的目录里寻找ls命令，从而执行该命令。 为什么要修改环境变量PATH？ 有时候，我们需要在自定义…

    other 2023年6月27日
    00

  • android I/0流操作文件(文件存储)

    Android I/O流操作文件（文件存储）攻略 在Android开发中，我们经常需要对文件进行读写操作。Android提供了一些I/O流操作文件的方法，可以方便地进行文件的读写和存储。下面是一个完整的攻略，包含了文件的读取、写入和存储的示例。 1. 文件读取 要读取文件，我们可以使用FileInputStream类和BufferedReader类。下面是一…

    other 2023年8月26日
    00

  • Android 获取IP地址的实现方法

    Android 获取IP地址的实现方法 在Android应用程序中，可以使用以下方法获取设备的IP地址。 方法一：使用WifiManager // 在Activity或Fragment中获取WifiManager实例 WifiManager wifiManager = (WifiManager) getApplicationContext().getSyst…

    other 2023年7月31日
    00

  • Android 滚动时间选择的示例代码

    Sure! Here is a detailed guide on implementing a time picker with scrolling functionality in Android, along with two example explanations: Step 1: Add Dependencies To begin, make s…

    other 2023年9月6日
    00

  • postman的post请求方式的四种类型的数据

    postman的post请求方式的四种类型的数据 在开发过程中，我们通常需要使用Postman来测试接口的可用性，其中最常用的操作就是使用POST请求并发送数据。在发送数据时，我们可以使用4种不同的数据格式。在本文中，我们将介绍这4种数据格式，并探讨它们的优缺点。 1. x-www-form-urlencoded x-www-form-urlencoded是…

    其他 2023年3月28日
    00
合作推广
合作推广
分享本页
返回顶部