jquery 이미지 지연 로딩 필수 프런트엔드 개발 기술 series_jquery

현재 주요 쇼핑 웹사이트에서는 모두 이 로딩 방식을 채택하고 있습니다. 오늘은 한 네티즌의 웹사이트에서 이미지 지연 로딩을 위한 플러그인을 찾았는데, 아주 유용하네요. 먼저 이미지 지연 로딩의 원리를 소개하겠습니다. 먼저 이미지의 실제 주소를 사용자 정의 속성에 저장하고(속성 이름은 사용자에게 달려 있으며 여기서는lazy-src를 사용함) 이미지의 src 속성을 자리 표시자 이미지로 바꿔야 합니다. 그림이 작을수록 더 좋습니다. 기본적으로 작동하고 표시되지 않습니다.

코드 복사 코드는 다음과 같습니다. 첫 번째. 페이지 로딩이 시작되면 브라우저는 현재 페이지에 있는 모든 이미지의 위치를 획득하여 캐시하고(오프셋 값을 획득하면 페이지 리플로우가 트리거됨) 가시 영역을 계산하며, 이미지가 보이는 영역에 나타나게 되는데, js를 사용하여 이미지 태그의 src 값을 이미지의 실제 주소로 동적으로 대체하면, 방금 보이는 영역에 나타난 이미지가 로딩되기 시작합니다. 둘째. 사용자가 페이지를 아래로 스크롤하면 js를 사용하여 처음으로 보이는 영역에 나타나는 사진이 있는지 여부를 다시 계산합니다. 그렇다면 해당 사진의 src 값만 교체되고 실제 사진이 로드됩니다. 반복 작업으로 인한 메모리 누수를 방지하려면 모든 이미지가 로드된 후 해당 트리거 이벤트를 언로드해야 합니다. 드디어. 이 문서에서는 전체 창을 큰 컨테이너로 처리합니다. 원하는 경우 작은 컨테이너에 이미지 지연 로드를 구현할 수도 있습니다. 원리는 간단하지만 응용분야는 다양합니다. 아래 주소에서 지연된 이미지 로딩 시연을 볼 수 있지만, 해당 도구(firebug, Fiddler2)를 사용하여 지연된 이미지 로딩의 효과를 모니터링해 보세요. 이미지 지연 로딩 플러그인의 코드는 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. 이미지 지연 로딩 플러그인 코드 (function( $ ){ $.fn.imglazyload = function( options ){ var o = $.extend({ attr : 'lazy-src', 컨테이너 : 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 = 수직 ? 'scrollTop': 'scrollLeft', winSize = 수직 ? 컨테이너.높이() : 컨테이너.폭(), scrollCoord = 컨테이너[ SCROLL ](), docSize = winSize 스크롤Coord; 🎜>/ / 지연 로드 트리거 var Trigger = { init : function( coord ){ return coord >= scrollCoord && coord } , scroll : function( coord ){ var scrollCoord = 컨테이너[ SCROLL ]() return coord >= scrollCoord && coord resize : function( coord ){ var scrollCoord = 컨테이너[ SCROLL ](), winSize = 수직 ? 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; } // 먼저 오프셋 값을 가져옵니다. 캐시에서, 캐시에 없는 경우에만 계산된 값을 가져옵니다. // 반복 획득으로 인한 리플로우를 방지하기 위해 계산된 값을 캐시합니다. coord = $elem.data( dataName ) if ( coord === 정의되지 않음 ){ coord = $elem.offset()[ OFFSET ]; $elem.data( dataName, coord ) isTrigger = isCustom || 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( 이벤트, 화재 ) else{ container.unbind( o.event, fire ) } $( window ).unbind( 'resize', fire ); 🎜>elems = null; } }; var fire = function( e ){ loader( $(this), e.type ) }; / 이벤트 바인딩 컨테이너 = 이벤트 === '스크롤' ? 컨테이너: $( this ) container.bind( event, fire ) $( window ).bind( 'resize', fire ); / / loader(); return this; })( jQuery ); attr string HTML에 해당하는 이미지의 실제 주소를 저장하는 속성 이름이며 기본값은lazy-src입니다. 컨테이너 돔 및 선택기 기본 컨테이너는 window이며, 컨테이너를 사용자 정의할 수 있습니다. event Stirng 이미지 로딩을 시작하는 이벤트 유형, 기본값은 window.onscroll 이벤트 fadeIn boolean jQuery의 fadeIn 효과를 사용하여 표시할지 여부, 기본값은 false입니다. 임계값 이미지에서 지정된 거리까지 스크롤하면 페이지가 로드됩니다. 기본값은 0입니다. vertical boolean 가로 스크롤 여부는 기본값이 true(세로)입니다. loadScript(기능 강화 버전) boolean 자바스크립트 광고 이미지를 차단하지 않고 로드할지 여부의 기본값은 false입니다.

참고: 전재시 출처를 꼭 밝혀주세요. 저자: 아일리안 아카데미