jquery를 사용하여 이미지를 지연 로드하는 방법

이 글에서는 비동기 로딩(이미지의 지연 로딩 방법)을 구현하기 위한 jquery를 주로 소개하는데, 관심 있는 친구들은 참고할 수 있습니다.

먼저 jq 뒤에 있는 플러그인을 소개하고

 (function($) { 
        // alert($.fn.scrollLoading); 
        $.fn.scrollLoading = function(options) { 
          var defaults = { 
            attr: "data-url" 
          }; 
          var params = $.extend({}, defaults, options || {}); 
          params.cache = []; 
          $(this).each(function() { 
            var node = this.nodeName.toLowerCase(), 
              url = $(this).attr(params["attr"]); 
            if(!url) { 
              return; 
            } 
            var data = { 
              obj: $(this), 
              tag: node, 
              url: url 
            }; 
            params.cache.push(data); 
          }); 
 
          var loading = function() { 
            var st = $(window).scrollTop(), 
              sth = st + $(window).height(); 
            $.each(params.cache, function(i, data) { 
              var o = data.obj, 
                tag = data.tag, 
                url = data.url; 
              if(o) { 
                post = o.position().top; 
                posb = post + o.height(); 
                if((post > st && post < sth) || (posb > st && posb < sth)) { 
                  if(tag === "img") { 
                    o.attr("src", url); 
                  } else { 
                    o.load(url); 
                  } 
                  data.obj = null; 
                } 
              } 
            }); 
            return false; 
          }; 
 
          loading(); 
          $(window).bind("scroll", loading); 
        }; 
      })(jQuery);

하단에서 초기화하세요

 $(document).ready(function () { 
    //实现图片慢慢浮现出来的效果 
    $("img").load(function () { 
      //图片默认隐藏  
      $(this).hide(); 
      //使用fadeIn特效  
      $(this).fadeIn("5000"); 
    }); 
    // 异步加载图片，实现逐屏加载图片 
    $(".scrollLoading").scrollLoading();  
  });

img 태그를

<img class="scrollLoading" data-url="image/logo.jpg" src="images/load.gif" />

data-url로 수정해야 합니다 비동기적으로 로딩되는 이미지, src 가장 먼저 로딩되는 이미지(보통 작은 이미지나 애니메이션)를 나타냅니다. 웹 페이지의 모든 src는 동일한 이미지로 링크되므로 웹 페이지 로딩 속도가 훨씬 빨라집니다. 이때, 로드할 이미지는 비동기적으로 로드됩니다. 함수)

관련 권장 사항:

이미지 지연 로딩을 위한 imgLazyLoading.js에 대한 자세한 설명

Lazy 구현 단계 Js를 사용한 로딩 및 크로스 도메인 구현

JavaScript를 사용한 이미지 지연 로딩 방법 소개

위 내용은 jquery를 사용하여 이미지를 지연 로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!