이미지 지연 로딩 플러그인_jquery를 구현하려면 Jquery.LazyLoad.js의 수정된 버전을 다운로드하세요.

인터넷에서 다운로드한 버전에는 버그가 많거나 적습니다. 특히 로딩 후 IE6 및 IE7에서 사진이 깜박이는 것이 큰 문제였습니다. 오랫동안 온라인에서 검색했지만 관련 해결책을 찾지 못했습니다. 해결책이 없으면 DIY 정신으로 스스로 해결하고, 버그를 분석하고, 아이디어를 정리해야 합니다. Jquery.LazyLoad.js 문제 이제 여러분과 공유할 아이디어와 방법을 알려 드리겠습니다.

해결 방법은 대략 두 가지입니다. 하나는 LazyLoad 자체의 필터 매개 변수로 시작하여 IE6 및 IE7에서 사용할 수 있는 매개 변수가 있다는 것을 확인한 다음 이 특수 항목을 사용하는 것입니다. 둘째, IE8 이상(IE8 포함), FireFox 및 Chrome과 같은 비 IE 코어 브라우저는 모두 fadeIn 효과를 지원하므로 이 멋진 특수 효과를 이러한 버전의 브라우저에서 사용할 수 있습니다.

아이디어가 떠오른 후 해결책을 생각해냈습니다.

1. 먼저 JQ를 사용하여 아래의 브라우저 유형과 버전을 확인합니다. IE8에서는 effect=show를 사용하고 그렇지 않으면 effect=fadeIn을 사용합니다. 브라우저 버전을 확인하는 함수는 다음과 같습니다.

코드를 복사하세요 코드는 다음과 같습니다.

function checkbrowse() {
var ua = navigator.userAgent.toLowerCase()
var is = (ua.match(/b(chrome) |opera|safari|msie|firefox)b/) || ['', 'mozilla'])[1];
var r = '(?:'는 '|version)[\/: ]([ \d.] )';
var v = (ua.match(new RegExp(r)) || [])[1]
jQuery.browser.is =
jQuery.browser .ver = v;
return {
'is': jQuery.browser.is,
'ver': jQuery.browser.ver
}
}

위 코드를 JQ 패키지에 추가했습니다. 나중에 사용할 수 있도록 경로는 http://demo.jb51.net/js/2011/lazyload/Js/lazyload/jquery.js입니다.

2. 브라우저 버전에 따라 다른 필터 효과를 표시하도록 Jquery.LazyLoad.js 함수를 수정합니다.

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

var public = checkbrowse()
var show effect = ""
if ((public['is'] == 'msie ' && public['ver'] show효과 = "표시"
} else {
show효과 = "fadeIn"
}
jQuery(document).ready( 함수( $) {
$("img").lazyload({
자리 표시자: "http://demo.jb51.net/js/2011/lazyload/Js/lazyload/grey.gif",
효과: show효과,
failurelimit: 10
})
})

Jquery.LazyLoad.js 사용 지침:
1. 같은 디렉토리 아래:
jquery.js
jquery.layzload.js
grey.gif
2. 특수 효과가 필요한 곳에 다음 코드를 추가합니다.



Jquery.LazyLoad.js 플러그- 수정된 버전 다운로드:
lazyload.rar
Jquery.LazyLoad.js 플러그인 매개변수 상세 설명:
다음은 LazyLoad 플러그의 일부 매개변수에 대해 설명합니다. -사용자가 결정을 내릴 수 있도록 보다 관련성이 높은 효과.

1, 미리 공간을 차지할 이미지를 사용하세요.
placeholder: "img/grey.gif",
매개변수: placeholder, 값은 특정 이미지 경로에 사용됩니다. 로드할 이미지를 점유 위치, 이미지가 로드되면 자리 표시자 이미지가 숨겨집니다

2, 로드에 사용할 효과
효과: "fadeIn",
매개변수: 효과( 특수 효과), 값은 show( 직접 표시), fadeIn(페이드 인), SlideDown(드롭 다운) 등입니다. 일반적으로 사용되는 fadeIn

3, 미리 로딩 시작
임계값: 200,
매개변수: 임계값, 값은 페이지 높이를 나타내는 숫자입니다. 200으로 설정하면 스크롤 막대가 대상 위치에서 200m 떨어져 있을 때 이미지 로드를 시작하므로 사용자가 이를 방해할 수 있습니다.

4, 이벤트가 발생했을 때만 로드됩니다.
이벤트: "클릭",
매개변수: 이벤트, 값에는 클릭(클릭), 마우스오버(마우스)가 포함됩니다. over), sporty(스포티), foobar(...)를 클릭하면 마우스가 움직이지 않거나 사진이 로딩되기 시작하는 것을 알 수 있습니다. 후자의 두 값은 테스트되지 않았습니다.

5, 특정 컨테이너의 사진에 대한 효과를 얻으려면
container: $("#container"),
매개변수: 컨테이너, 값은 특정 컨테이너입니다. 게으른 로드는 기본적으로 풀 브라우징에 적용됩니다. 특정 DIV의 스크롤바를 당길 때 이 매개변수를 사용하면 DIV의 스크롤바를 당길 때 사진이 순서대로 로드될 수 있습니다.

6. 기본적으로 지연 로드는 표시 영역에 없는 첫 번째 이미지를 찾을 때 로드를 계속하지 않습니다. 그러나 HTML 컨테이너가 혼동되면 표시 영역의 이미지가 로드되지 않을 수 있습니다. N개의 이미지. 이 문제를 방지하려면 가시 영역 외부의 이미지를 사용하세요.