이미지의 지연 로딩은 무엇을 의미합니까? 이미지의 지연 로딩을 구현하는 방법

이 기사의 내용은 이미지의 지연 로딩이 무엇을 의미하는지에 관한 것입니다. 이미지 지연 로딩의 구현 방법은 특정 참조 가치가 있습니다. 도움이 필요한 친구가 이를 참조할 수 있기를 바랍니다.

일명 지연 로딩은 웹 페이지 열기 속도를 향상하고 더 나은 사용자 경험을 얻기 위한 수단입니다. 선택 항목 중 중요한 부분이 먼저 로드되고, 필요할 때 덜 중요한 부분이 로드됩니다. 예를 들어, 전자상거래 웹사이트의 첫 번째 화면에는 일반적으로 고화질의 배너나 캐러셀과 같은 많은 데이터가 포함됩니다. 페이지의 첫 번째 화면이 아닌 부분에는 수많은 회원들의 제품과 수많은 사진이 섞여 있습니다. 첫 화면의 부드러움을 보장하기 위해 지연 로딩을 선택하는 것이 매우 중요한 때입니다.

이 기사는 이미지 지연 로딩의 간단한 예입니다. 방법은 비교적 간단하고 명확합니다. js 기초만 있으면 이해할 수 있습니다.

말도 안되는 소리는 그만

<img  alt="이미지의 지연 로딩은 무엇을 의미합니까? 이미지의 지연 로딩을 구현하는 방법" >

우선 첫 화면에 없는 이미지에 대해서는 class="img-delay"와 src 속성을 추가하는데, 후자는 원본 URL 주소의 속성을 배치하는 데 사용됩니다. image 이미지 자체의 src 속성에 대해 공백으로 남겨두거나 Tmall과 같이 "그림을 표시할 수 없음" 알림 그림을 추가할 수 있습니다.

다음으로 해야 할 일은 그림을 표시하는 것입니다. 사용자가 슬라이드하는 곳마다 (조금 미리 표시가 더 좋으므로 여기서는 미리 하지 않겠습니다)

//首先你需要引入一个 jQuery 库

//获取需要延迟加载的图片
var $picDelay = $(".img-delay");

//在 window 上监听滑动事件
$(window).scroll(function(){
  var scrollTop = $(window).scrollTop();    //滑块划过的距离
  var screenHeight = screen.height;     //屏幕浏览器内容部分的高度

  //计算每个图片的位置是否符合要求
  $picDelay.each(function(idx, ele){
    var $ele = $(ele);
    //当scrollTop + screenHeight === ele.offsetTop时图片刚好出现上边沿
    if(scrollTop + screenHeight >= ele.offsetTop){
      $ele.attr("src", $ele.attr("src")).removeAttr('src').removeClass("img-delay");
    }
  });

  //当所有图片都加载了以后，移除这个事件
  if($(".img-delay").length <p>관련 추천: </p><p><a href="http://www.php.cn/js-tutorial-388508.html" target="_self"> 이미지의 지연 로딩 및 사전 로딩에 대해 자세히 이야기해 보겠습니다 </a><br></p><p><a href="http://www.php.cn/php-weizijiaocheng-337244.html" target="_self">php's 컬 캡처 게으른 로딩 이미지 방법, 조언 좀 주세요</a></p><p class="comments-box-content"></p>

위 내용은 이미지의 지연 로딩은 무엇을 의미합니까? 이미지의 지연 로딩을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!