图片懒加载

最新推荐文章于 2022-05-26 16:30:54 发布

weixin_43908304

最新推荐文章于 2022-05-26 16:30:54 发布

阅读量97

点赞数

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

原文链接：https://www.jq22.com/jquery-info11629

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery 插件库 jQuery插件库-收集最全最新最好的jQuery插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            display: block;
            margin: 0 auto;
            margin-top: 100px;
        }

    </style>
</head>
<body >
    <img data-lazy-src="https://picsum.photos/500/300?image=100" />
    <img data-lazy-src="https://picsum.photos/500/300?image=101" />
    <img data-lazy-src="https://picsum.photos/500/300?image=102" />
    <img data-lazy-src="https://picsum.photos/500/300?image=103" />
    <img data-lazy-src="https://picsum.photos/500/300?image=104" />
    <img data-lazy-src="https://picsum.photos/500/300?image=105" />
    <img data-lazy-src="https://picsum.photos/500/300?image=106" />

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="./dist/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>

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