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

最新推荐文章于 2024-02-26 17:15:08 发布

转载最新推荐文章于 2024-02-26 17:15:08 发布 · 372 阅读

0 ·

CC 4.0 BY-SA版权

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

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现的图片懒加载技术，该技术能够提高网页加载速度，改善用户体验。通过监听滚动事件，只有当图片即将进入可视区域时才加载实际图片，避免了不必要的资源消耗。

<img class="lazy" src=""  x-src="背景图地址" />

    $(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"));
                }
            }
        });