懒加载的实现必看

最新推荐文章于 2024-11-13 01:18:00 发布

^^为欢几何^^

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量87

点赞数

文章标签： javascript jquery html

本文链接：https://blog.csdn.net/qq_52526079/article/details/130661429

版权

<!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">
    <!-- 引入jQuery -->
    <script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
    <title>Document</title>

    <style>

        img {
            display: block;
            height: 400px;
        }
    </style>
</head>

<body>
        <img data-lazy-src="../语句学习/img/1.jpg">
        <img data-lazy-src="../语句学习/img/2.jpg">
        <img data-lazy-src="../语句学习/img/3.jpg">
        <img data-lazy-src="../语句学习/img/4.jpg">
        <img data-lazy-src="../语句学习/img/5.jpg">
        <img data-lazy-src="../语句学习/img/6.jpg">
        <img data-lazy-src="../语句学习/img/1.jpg">
        <img data-lazy-src="../语句学习/img/2.jpg">
        <img data-lazy-src="../语句学习/img/3.jpg">
        <img data-lazy-src="../语句学习/img/4.jpg">
        <img data-lazy-src="../语句学习/img/5.jpg">
        <img data-lazy-src="../语句学习/img/6.jpg">
        <img data-lazy-src="../语句学习/img/1.jpg">
        <img data-lazy-src="../语句学习/img/2.jpg">
        <img data-lazy-src="../语句学习/img/3.jpg">
        <img data-lazy-src="../语句学习/img/4.jpg">
        <img data-lazy-src="../语句学习/img/5.jpg">
        <img data-lazy-src="../语句学习/img/6.jpg">
        <img data-lazy-src="../语句学习/img/1.jpg">
        <img data-lazy-src="../语句学习/img/2.jpg">

    <!-- 引入懒加载插件 -->
    <script src="./EasyLazyload.min.js"></script>
    <script>
        lazyLoadInit({
            coverColor: "white",
            // coverDiv:"<h1>test</h1>",
            offsetBottom: 0,
            offsetTopm: 0,
            showTime: 1100,
            onLoadBackEnd: function (i, e) {
                console.log("onLoadBackEnd:" + i);
            }
            , onLoadBackStart: function (i, e) {
                console.log("onLoadBackStart:" + i);
            }
        });
    </script>
</body>

</html>

实现说明：

首先引入jQuery

在线引入方式：<script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>

其次将图片 src 替换为 data-lazy-src

最后将懒加载插件库引入

引入步骤：

1.下载懒加载插件网址：EasyLazyload.js 超好用js图片延迟加载 (jq22.com)https://www.jq22.com/jquery-info116292.将下载的压缩文档解压后找到EasyLazyload.min.js文件（可参考以下路径查找）

EasyLazyload.min.js文件路劲：jq22EasyLazyload189220161225\EasyLazyload\dist

3.在body结束标签前引入插件库<script src="./EasyLazyload.min.js"></script>

4.在刚引入的插件库后面用调全局方法lazyLoadInit(），如下：

代码注释：

coverColor：图片即将显示时覆盖层的颜色
coverDiv：图片即将显示时覆盖层可显示的土自定义组件
offsetBottom：图片距离屏幕底部出现时间点的距离差值（注解：延迟加载图片会在图片顶部接触屏幕底部时出现，如果想要让图片顶部距离屏幕底部有一定距离时出现，请设置此值）
offsetTopm：图片距离屏幕底部出现时间点的距离差值（注解：同上，距离顶部）
onLoadBackEnd：图片已经完全出现时的回调函数，参数为（index，event）加载的图片下标，以及dom对象（dom对象为jquerydom或zeptodom对象）
onLoadBackStart：图片已经下载完成，即将开始显示时的回调函数（参数同上）