jquery를 사용하여 구현된 이미지 지연 로딩 플러그인(이미지 지연 로딩 원칙 포함)_jquery

지연 로딩은 지연 로딩이라고도 합니다. 일반적으로 페이지에 이미지가 많고 페이지 높이나 너비가 여러 화면인 경우 페이지가 처음 로드될 때 이미지만 표시됩니다. 페이지가 스크롤되면 이미지가 로드되기 전에 표시 영역에 표시됩니다. 이렇게 하면 페이지 로딩 속도가 크게 향상되고 동시 이미지 요청이 줄어들어 서버에 대한 부담도 줄어듭니다. 사용자가 첫 화면에만 머무르면 데이터도 절약할 수 있습니다. TAB에 그림이 많으면 TAB에도 적용할 수 있으며 TAB이 트리거되면 그림이 로드됩니다.

이미지 지연 로딩의 원리는 비교적 간단합니다. 먼저, 사용자 정의 속성(lazy-src)에서 이미지의 실제 주소를 캐시하고 src 주소에 대해 1×1 완전 투명한 자리 표시자 이미지를 사용합니다. . 물론 자리 표시자 이미지가 다른 이미지일 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

이미지 로딩에는 자바스크립트가 사용되기 때문에 사용자가 자바스크립트를 비활성화한 경우 대체 설정이 가능합니다.

코드 복사 코드는 다음과 같습니다.

페이지가 처음 로드되면 페이지의 이미지 위치가 얻어지고 캐시됩니다(오프셋 값이 취해질 때마다 페이지 리플로우가 트리거됨). 가시 영역이 계산되고 위치가 보이는 영역에 이미지의 내용이 나타나면 src 값은 실제 주소로 대체되고 이미지 로딩이 시작됩니다.

페이지가 스크롤되면 이미지의 캐시된 위치 값이 가시 영역에 나타나는지 확인하고 대신 src가 로드됩니다. 모든 이미지가 로드되면 해당 트리거 이벤트가 언로드되어 반복 작업으로 인한 메모리 누수를 방지합니다. 전체 창을 큰 컨테이너로 생각하면 페이지에 작은 컨테이너를 설정할 수도 있고 작은 컨테이너에 이미지 지연 로드를 구현할 수도 있습니다.

다음은 제가 jQuery 플러그인으로 작성한 구현 코드입니다.

코드 복사 코드는 다음과 같습니다.

(function( $ ){
$.fn.imglazyload = function( options ){
 var o = $.extend({
    attr  :   'lazy-src',
    container  :  window, 
    event   :  'scroll',    
    fadeIn      :   false,    
    threshold  :  0, 
    vertical  :  true 
   }, options ),

  event = o.event,
  vertical = o.vertical,
  container = $( o.container ),
  threshold = o.threshold, 
  // 将jQuery对象转换成DOM数组便于操作
  elems = $.makeArray( $(this) ),  
  dataName = 'imglazyload_offset',   
  OFFSET = vertical ? 'top' : 'left',
  SCROLL = vertical ? 'scrollTop' : 'scrollLeft',   
  winSize = vertical ? container.height() : container.width(),
  scrollCoord = container[ SCROLL ](),
  docSize = winSize + scrollCoord;

 // 延迟加载的触发器 
 var trigger = {

  init : function( coord ){
   return coord >= scrollCoord &&
                            coord   },

  scroll : function( coord ){
   var scrollCoord = container[ SCROLL ]();
   return coord >= scrollCoord &&
                    coord   },

  resize : function( coord ){
   var scrollCoord = container[ SCROLL ](),
    winSize = vertical ?
                            container.height() :
                            container.width();
   return coord >= scrollCoord &&
                   coord   }
 };

 var loader = function( triggerElem, event ){
  var i = 0,
   isCustom = false,
   isTrigger, coord, elem, $elem, lazySrc;

  // 自定义事件只要触发即可，无需再判断
  if( event ){
   if( event !== 'scroll' && event !== 'resize' ){
    isCustom = true;
   }
  }
  else{
   event = 'init';
  }

  for( ; i    isTrigger = false;
   elem = elems[i];
   $elem = $( elem );
   lazySrc = $elem.attr( o.attr );

   if( !lazySrc || elem.src === lazySrc ){
    continue;
   }
   // 先从缓存获取offset值，缓存中没有才获取计算值,
   // 将计算值缓存，避免重复获取引起的reflow
   coord = $elem.data( dataName );

   if( coord === undefined ){
    coord = $elem.offset()[ OFFSET ];
    $elem.data( dataName, coord );
   }

   isTrigger = isCustom || trigger[ event ]( coord );   

   if( isTrigger ){
    // 加载图片
    elem.src = lazySrc;
    if( o.fadeIn ){
     $elem.hide().fadeIn();
    }
    // 移除缓存
    $elem.removeData( dataName );
    // 从DOM数组中移除该DOM
    elems.splice( i--, 1 );
   }
  }

// 모든 이미지가 로드된 후 트리거 이벤트 언로드
if( !elems.length ){
if( TriggerElem ){
TriggerElem.unbind( event, fire );
}
else{
컨테이너.unbind( o.event, fire );
}
$( window ).unbind( 'resize', fire );
elems = null;
}

};

var fire = function( e ){
loader( $(this), e.type );
};

// 이벤트 바인딩
컨테이너 = 이벤트 === 'scroll' ? 컨테이너 : $( this )
컨테이너.bind( event, fire );
$( window ).bind( 'resize', fire ) ;

// 초기화
loader();

이것을 돌려주세요;
};

})( jQuery );

전화:

코드 복사 코드는 다음과 같습니다.

$ ( 'img' ).imglazyload({
event : 'scroll',
attr : 'lazy-src'
});

기본 호출에서는 모든 매개변수를 생략할 수 있습니다. .

코드 복사 코드는 다음과 같습니다.

$( 'img' ).imglazyload();

이미지 지연 로딩을 위한 플러그인 API 설명:

attr string
HTML에 해당하는 이미지의 실제 주소를 저장하는 속성 이름이며 기본값은lazy-src입니다.

컨테이너 돔 및 선택기
기본 컨테이너는 window이며, 컨테이너를 사용자 정의할 수 있습니다.

이벤트 교반
이미지 로딩을 트리거하는 이벤트 유형, 기본값은 window.onscroll 이벤트입니다

fadeIn boolean
jQuery의 fadeIn 효과를 사용하여 표시할지 여부는 기본값이 false입니다.

임계값
이미지에서 지정된 거리까지 스크롤하면 페이지가 로드됩니다. 기본값은 0입니다.

vertical boolean
가로 스크롤 여부는 기본값이 true(세로)입니다.

loadScript(기능 강화 버전) boolean
자바스크립트 광고 이미지를 차단하지 않고 로드할지 여부의 기본값은 false입니다.