前端-图片懒加载的使用

最新推荐文章于 2024-09-11 14:16:25 发布

糊涂涂是个小盆友

最新推荐文章于 2024-09-11 14:16:25 发布

阅读量313

点赞数 2

分类专栏：前端文章标签：前端 html javascript

本文链接： https://blog.csdn.net/qq_52998673/article/details/127073506

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

一、什么是图片懒加载？

当一个页面中图片资源过多的时候，会影响页面显示的速度，这个时候就需要使用到图片懒加载，
先只加载用户浏览区域的图片其他区域的图片先不加载，等到用户浏览到其他区域的时候再进行加载图片资源。

二、使用到的技术：

html+css+jQuery

三、步骤

步骤一：打开jQuery插件库搜索懒加载:https://www.jq22.com/

步骤二：进入后点击立即下载得到压缩包

步骤三：解压压缩包得到文件夹

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IHiHfUWE-1664267231798)(C:\Users\86186\AppData\Roaming\Typora\typora-user-images\1664266291081.png)]$

步骤四：打开压缩包中的index.html有些时候是demo.html，可打开页面自行查看

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kOgafmSi-1664267231799)(C:\Users\86186\AppData\Roaming\Typora\typora-user-images\1664266353607.png)]$

步骤五：打开网页后单击右键查看源码，得到所需要的内容（css样式，html样式及类名，js代码，js引入文件）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QEb0IPUl-1664267231800)(C:\Users\86186\AppData\Roaming\Typora\typora-user-images\1664266610732.png)]$

步骤六：将步骤四图片中圈起来的内容在自己需要使用到图片懒加载技术的网页中使用

建议：script中的内容写在body的后面，跟原版保持一致

注意：需要引入外部js文件，该文件就在下载的文件夹中，将该文件复制粘贴到自己项目的js文件夹中再引入即可

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OmyI7FIj-1664267231802)(C:\Users\86186\AppData\Roaming\Typora\typora-user-images\1664267032533.png)]$

四、代码


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="./js/element-lazy.js"></script>

    <title>Document</title>

    <style>

        img {

            display: *block*;

        }

        .model {

            position: *relative*;

            width: 400px;

            height: 600px;

            margin: 40px *auto*;

            visibility: *hidden*;

            opacity: 0;

            background-color: #00aa7f;

            border: 1px *solid*;

        }

    </style>

</head>

<body>

    <img src="./img/car.jpg" alt="" class="model">

    <img src="./img/car.jpg" alt="" class="model">

    <img src="./img/car.jpg" alt="" class="model">

    <img src="./img/car.jpg" alt="" class="model">

    <img src="./img/car.jpg" alt="" class="model">

    <img src="./img/car.jpg" alt="" class="model">

    <img src="./img/car.jpg" alt="" class="model">

    <img src="./img/car.jpg" alt="" class="model">

    <img src="./img/car.jpg" alt="" class="model">

    <img src="./img/car.jpg" alt="" class="model">

    <img src="./img/car.jpg" alt="" class="model">

</body>

<script type="text/javascript">

    new elLoad(".model", {

        delay: 3000

    });

</script>

</html>