Jquery_jquery를 사용하여 이미지 사전 로드 및 지연 로드를 구현하는 방법

이 문서의 예에서는 Jquery가 이미지 사전 로드 및 지연 로드를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

이미지가 로드된 후 해당 작업을 수행할지 또는 이미지 로드를 지연할지 결정해야 하는 프로젝트가 많습니다. 이미 인터넷에 아주 좋은 플러그인이 있지만 항상 약간 어색하게 느껴집니다. 이러한 효과를 위해서는 별도의 플러그인을 로드해야 하므로 너무 편해서 제가 직접 메소드를 작성했습니다.

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

function loadimg(arr,funLoading,funOnLoad,funOnError){
var numLoaded=0,
숫자 오류=0,
isObject=Object.prototype.toString.call(arr)==="[object Object]" ? true : false;

var arr=isObject ? arr.get() : arr;
for(a in arr){
var src=isObject ? $(arr[a]).attr("data-src") : arr[a];
preload(src,arr[a]);
}

함수 미리 로드(src,obj){
var img=new Image();
img.onload=function(){
numLoaded ;
funLoading && funLoading(numLoaded,arr.length,src,obj);
funOnLoad && numLoaded==arr.length && funOnLoad(numError);
};
img.onerror=function(){
numLoaded ;
숫자 오류 ;
funOnError && funOnError(numLoaded,arr.length,src,obj);
}
img.src=src;
}
}

매개변수 설명:

arr: 이미지 경로를 저장하는 배열이거나 선택한 img의 jquery 객체일 수 있습니다.
funLoading: 각 개별 이미지가 로드된 후 수행되는 작업
funOnLoad: 모든 이미지가 로드된 후 작업
funOnError: 단일 이미지 로딩 오류가 발생할 때의 동작입니다.

예:

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

var imgonload=function(errors){
             /*오류: 로딩 오류가 발생한 사진 수;*/
console.log("loaded," error " 이미지 로드 오류!");
}

var funloading=function(n,total,src,obj){
          /*
n: 로드된 항목 수
            total: 로드할 총 이미지 수
SRC: 현재 로드된 사진 경로
​​​​ obj: loadimg 함수에 전달된 arr이 이미지 경로를 저장하는 배열인 경우 obj=src는 이미지 경로,
arr이 jquery 객체인 경우 obj는 현재 로드된 img dom 객체입니다.
*/
console.log(n "of" 총 " 사진이 로드되었습니다.",src);
var newimg = document.createElement("img");
newimg.src=src;
$("body").append(newimg).fadeIn();
}

var funloading_obj=function(n,total,src,obj){
console.log(n "of" 총 " 사진이 로드되었습니다.",src);
$(obj).attr("src",src);
$(obj).fadeIn(200);
}

var funOnError=function(n,total,src,obj){
console.log("the " n "st img 로드 오류!");
}

통화 예:

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

console.log("loading...");
loadimg($("img"),funloading_obj,imgonload,funOnError);
/*loadimg(["http://pic22.nipic.com/20120619/9607634_212642465144_2.jpg",
"/20120531/1670912_103610084349_2.jpg",
"/20120616/4952071_130629530136_2.jpg",
"/20120610/1723580_105037029000_2.jpg",
"http://pic22.nipic.com/20120617/2572038_125013326121_2.jpg"
],funloading,imgonload,funOnError);*/

위는 원래 작성 방법입니다. 다음으로 Lazy Load 기반의 이미지 지연 로딩을 위한 jQuery 플러그인을 소개합니다

지연 로드는 jQuery에 따라 다릅니다. 페이지의 헤드 영역에 다음 코드를 추가하세요.

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

HTML 코드를 수정해야 합니다. src 속성에 부스 기호 이미지를 설정해야 합니다. 데모 페이지에서는 1x1 픽셀 회색 GIF 이미지를 사용하며, 여기서는 실제 이미지의 URL을 정의해야 합니다. 지연 로딩 이미지 객체를 얻기 위한 특정 클래스입니다. 이렇게 하면 플러그인 바인딩을 간단하게 제어할 수 있습니다.

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

이미지 처리 코드는 다음과 같습니다.

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

$("img.lazy").lazyload();

이렇게 하면 지연 클래스가 있는 모든 이미지가 지연 로드됩니다. 기본 옵션 데모를 참조하세요

민감도 설정

JavaScript는 거의 모든 브라우저에서 활성화되어 있습니다. 그러나 JavaScript를 지원하지 않는 클라이언트에서는 실제 이미지를 표시하고 싶을 수도 있습니다. 브라우저가 JavaScript를 지원하지 않을 때 실제 이미지 조각을

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

자리 표시자는 CSS를 통해 숨길 수 있습니다.

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

.lazy {
표시: 없음;
}

JavaScript를 지원하는 브라우저에서는 DOM이 준비되면 자리 표시자를 표시해야 하며, 이는 플러그인 초기화와 동시에 수행할 수 있습니다.

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

$("img.lazy").show().lazyload( );

이는 선택 사항이지만 플러그인을 정상적으로 다운그레이드하려면 수행해야 합니다.

민감도 설정

기본적으로 이미지가 화면에 나타날 때 로드됩니다. 이미지를 미리 로드하고 싶다면 임계값 옵션을 200으로 설정하면 이미지가 200일 때 미리 로드됩니다.

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

$("img.lazy").lazyload({ 임계값 : 200 });

자리 표시자 이미지

자리 표시자 이미지를 설정하고 이벤트를 정의하여 로드 작업을 실행할 수도 있습니다. 이때 자리 표시자 이미지의 URL 주소를 설정해야 합니다. 투명, 회색 및 흰색 1x1 픽셀 이미지가 이미 플러그에 포함되어 있습니다.

이벤트 트리거 로드

이벤트는 click 및 mouseover와 같은 jQuery 이벤트일 수 있습니다. 또한 sporty 및 foobar와 같은 사용자 정의 이벤트를 사용할 수도 있습니다. 기본적으로 사용자가 해당 위치로 스크롤할 때까지 대기 상태입니다. 회색으로 표시된 그림을 클릭할 때까지 자리표시자 이미지가 로드되지 않도록 하려면 다음을 수행하세요.

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

$("img").lazyload({
자리 표시자: "img/grey.gif",
이벤트 : "클릭"
});

특수 효과 사용

이미지가 완전히 로드되면 플러그인은 기본적으로 show() 메서드를 사용하여 이미지를 표시합니다. 실제로 다음 코드는 FadeIn 효과를 사용합니다.
효과 시연 페이지입니다.

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

$("img.lazy").lazyload({
효과: "fadeIn"
});

이미지는 컨테이너 안에 있습니다

스크롤 막대가 있는 DIV 요소와 같은 스크롤 가능한 컨테이너의 이미지에 플러그인을 사용할 수 있습니다. 컨테이너를 jQuery 개체로 정의하고 이를 초기화 메서드에 매개변수로 전달하기만 하면 됩니다. 가로 스크롤 데모 페이지와 세로 스크롤 데모 페이지.

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

#container {
높이: 600px;
오버플로: 스크롤;
}
$("img.lazy").lazyload({    
컨테이너: $("#컨테이너")
});

사진이 순서대로 정렬되지 않은 경우

페이지를 스크롤할 때 Lazy Load는 로드된 이미지를 반복합니다. 루프에서는 이미지가 표시 영역 내에 있는지 여부를 감지하며 기본적으로 표시되지 않는 첫 번째 이미지가 나타나면 루프가 중지됩니다. 이미지는 유동적으로 분산된 것으로 간주되며 페이지의 이미지 순서는 HTML 코드의 순서와 동일합니다. 그러나 일부 레이아웃에서는 이러한 가정이 적용되지 않습니다. 그러나 다음을 통해 로드 동작을 제어할 수 있습니다. 실패 제한 옵션

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

$("img.lazy").lazyload({
실패_한계 : 10
});

눈에 보이는 영역에 없는 이미지 10개를 찾은 후 플러그인이 검색을 중지하도록 failurelimit를 10으로 설정하세요. 레이아웃이 번거롭다면 이 매개변수를 더 높게 설정하세요.

이미지 로딩 지연

Lazy Load 플러그인의 불완전한 기능이지만 이미지의 지연 로딩을 구현하는 데에도 사용할 수 있습니다. 다음 코드는 페이지가 로드된 후 5초 후에 로딩을 구현합니다. 지정된 영역이 자동으로 로드됩니다. 이것은 지연 로딩 데모 페이지입니다.

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

$(function() {      
$("img:below-the-fold").lazyload({
        이벤트: "스포티"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000);
});

숨겨진 이미지 로드 중

페이지에 숨겨진 사진이 많이 묻혀 있을 수 있습니다. 예를 들어 플러그인을 사용하여 목록을 필터링하는 경우 성능을 향상하기 위해 목록에 있는 각 항목의 표시 상태를 지속적으로 수정할 수 있습니다. 로드는 기본적으로 숨겨진 사진을 무시합니다. 숨겨진 이미지를 로드하려면 Skip_invisible을 false로 설정하세요

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

$("img.lazy").lazyload({
Skip_invisible : 거짓
});

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.