1. Python技术站首页
  2. other

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

• other
yizhihongxing

下面是详细讲解"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日

相关文章

  • 海量数据Excel报表利器——EasyExcel(开场篇)

    海量数据Excel报表利器——EasyExcel(开场篇) Excel作为办公软件的代表，已经成为处理数据、制作报表的必备工具之一。但随着数据量的不断增大，Excel的限制和不足逐渐变得显露出来，如数据处理速度过慢、文件大小限制等问题逐渐变得引人注目。而一款名叫EasyExcel的Java开源框架，正是为了解决Excel在处理海量数据时遇到的种种问题而诞生。…

    其他 2023年3月28日
    00

  • C++虚函数注意事项

    C++虚函数注意事项 在C++中，虚函数是面向对象编程中的重要概念，它使得我们可以通过运行时多态性实现不同类对象的动态调用。但是，使用虚函数需要注意以下几个方面。 注意事项1：把虚函数声明和定义全部放在类的内部 虚函数需要在类的内部进行声明和定义，这样才能实现对派生类函数的动态调用。把虚函数声明和定义放在类的外部可能会出现函数地址不正确或无法调用的问题。 示…

    other 2023年6月26日
    00

  • mysql 8.0.26 安装配置方法图文教程

    下面是 “mysql 8.0.26 安装配置方法图文教程” 的完整攻略： 安装前的准备 在开始安装过程之前，需要做一些准备工作，包括： 下载 MySQL 8.0.26 的安装文件。可以在 MySQL 的官方网站上下载，也可以在第三方镜像站点上下载。 确定安装 MySQL 的目录。可以选择安装到默认目录，也可以选择其他目录。 确定 MySQL 的数据目录。数据…

    other 2023年6月27日
    00

  • 关于python:如何检查我使用的numpy版本?

    下面是关于“关于python:如何检查我使用的numpy版本?”的完整攻略： 1. Python 检查 NumPy 版本 在 Python 中，可以使用 numpy.__version__ 属性来检查当前的 NumPy 版本。具体操作如下： import numpy as np print(np.__version__) 输出结果： 1.20.1 可以看到，…

    other 2023年5月7日
    00

  • PDF提示文件名与真实的文件名怎么办?

    当需要下载PDF文件时，有些网站的文件名可能与实际文件名不符，可能会出现如下问题： 点击下载链接后默认弹出的提示框中显示的文件名与实际文件名不同。 下载文件后保存至本地的文件名与实际文件名不同。 针对这种情况，我们可以通过修改HTTP响应头中的Content-Disposition字段来解决。 Content-Disposition Content-Disp…

    other 2023年6月27日
    00

  • 二项式反演

    以下是“二项式反演”的完整攻略： 二项式反演 二项式反演是一种常用的组合数学技巧，用于求解形如$\sum_{k=0}^{n}\binom{n}{k}f(k)$的式子。其中，$\binom{n}{k}$表示从$n$个元素中选取$k$个元素的组合数，$f(k)$是一个关于$k$的函数。 二项反演的公式如下： $$\sum_{k=0}^{n}\binom{n}{k…

    other 2023年5月8日
    00

  • Redis在windows下安装与配置

    Redis是一款高性能的键值对存储数据库，常用于缓存、消息队列等场景。在Windows下安装和配置Redis相对于Linux来说稍微有些麻烦，但是也不是很难。下面是Redis在Windows下安装和配置的完整攻略。 安装Redis 下载Redis 在Redis官网下载页面（https://redis.io/download）下载最新的Redis稳定版，选择W…

    other 2023年5月5日
    00

  • 面向所有用户免费下载，微软：Win11 全新记事本、Media Player 播放器正式版发布

    面向所有用户免费下载Win11全新记事本、Media Player播放器正式版发布攻略 微软于2021年10月5日发布了Win11全新记事本、Media Player播放器正式版，并面向所有用户免费下载。以下是完整的攻略： 1. 获取下载链接 前往微软官网，进入Win11页面，找到下载页面。可以在页面中找到多种下载方式，如系统升级、ISO镜像等，建议选择与当…

    other 2023年6月25日
    00
合作推广
合作推广
分享本页
返回顶部