浅谈lazyload

最新推荐文章于 2025-04-22 09:02:41 发布

不要做切图仔

最新推荐文章于 2025-04-22 09:02:41 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：小技巧

本文链接：https://blog.youkuaiyun.com/qq_36470086/article/details/81437818

小技巧专栏收录该内容

9 篇文章

订阅专栏

本文介绍jq.lazyload.js插件的使用方法，通过设置data-original属性和lazy class实现图片懒加载，当图片进入视口时才开始加载，提高网页加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jq.lazyload.js用于长页面图片的延迟加载，视口外的图片会在窗口滚动到它的位置时再进行加载。
jq.lazyload.js可在百度cdn中下载或引用。

1.将图片路径写入data-original属性
2.给lazyload的图片增加一个名为lazy的class
3.选择所有要lazyload的图片（img.lazy），执行lazyload();

<img class="lazy" data-original="img/example.jpg" style="margin-top:1000px" height="200">
<script>
    $(function(){
        $("img.lazy").lazyload({
            //设置了滚动到距离图片20px时，图片就开始再开始加载
            threshold :20,
            //默认的加载效果是 show() ，下方自定义为fadeIn（）-淡入
            effect : "fadeIn"
        });
    })
</script>

注意：必须设置图片的高度或者宽度，否则插件可能无法正常工作

如果图片在容器之中，那么请添加键值对

<div style="height:600px;overflow:scroll" id="container">
    <img class="lazy" data-original="img/example.jpg"  alt="" style="margin-top:1000px" height="200">
</div>
<script>
    $(function(){
        $("img.lazy").lazyload({
            container: $("#container")
        });
    })
</script>