前端-图片懒加载的使用

文章目录

一、什么是图片懒加载？

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

二、使用到的技术：

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>