图片过多，让多余图片延迟显示，滚动到图片的位置再加载图片

最新推荐文章于 2024-03-08 09:43:36 发布

Candy438519207

最新推荐文章于 2024-03-08 09:43:36 发布

阅读量296

点赞数

分类专栏： JQuery 文章标签： jquery

原文链接：https://www.cnblogs.com/MiaDeng/p/9759190.html

版权

JQuery 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的图片懒加载技术，该技术通过监听页面滚动事件，动态加载可视区域内的图片，有效减少了页面初次加载时的数据传输量，提升了用户体验。

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

      $(document).ready(function(){
    $("img").each(function(){
        if( ($(this).offset().top + $(this).height()/8) < $(window).height() ){
            $(this).attr("src", $(this).attr("x-src"));
        }
    });
});

  window.onscroll = function() {  
    $("img").each(function(){
        if($(this).attr("src") == ""){
            if( ($(this).offset().top + $(this).height()/8) < ($(window).height() + $(window).scrollTop())){
                $(this).attr("src", $(this).attr("x-src"));
            }
        }
    });

转载于:https://www.cnblogs.com/MiaDeng/p/9759190.html