Jquery.LazyLoad.js 수정판 다운로드,이미지 지연 로드 플러그 인 구현

인터넷 에서 내 려 받 은 버 전 은 많 든 적 든 버그 가 있다.특히 불 러 온 후 IE6 와 IE7 에서 그림 이 반 짝 이 는 것 은 큰 문제 로 인터넷 에서 오랫동안 찾 아 봤 지만 관련 해결 방안 을 찾 지 못 했다.해결 방안 이 없 으 면 우리 DIY 의 정신 을 발휘 하여 자신의 생각 으로 해결 하고 BUG 를 분석 하 며 생각 을 정리 해 야 합 니 다.얼마 전에 제 가 팝 업 창 효 과 를 만 드 는 방법 과 결합 하여 Jquery.Lazy Load.js 의 호 환 문 제 를 해결 하고 아이디어 와 방법 을 여러분 과 공유 하 겠 습 니 다.해결 방향 은 크게 두 가지 입 니 다.하 나 는 Lazy Load 자체 의 필터 매개 변수 에서 시작 한 것 입 니 다.하 나 는 IE6 와 IE7 에서 사용 할 수 있 는 매개 변수 가 있 는 것 을 발 견 했 습 니 다.바로 show 입 니 다.그러면 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 = '(?:' + is + '|version)[\\/: ]([\\d.]+)'; 
var v = (ua.match(new RegExp(r)) || [])[1]; 
jQuery.browser.is = 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 showeffect = ""; 
if ((public['is'] == 'msie' && public['ver'] < 8.0)) { 
showeffect = "show" 
} else { 
showeffect = "fadeIn" 
} 
jQuery(document).ready(function($) { 
$("img").lazyload({ 
placeholder: "http://demo.jb51.net/js/2011/lazyload/Js/lazyload/grey.gif", 
effect: showeffect, 
failurelimit: 10 
}) 
}); 

Jquery.LazyLoad.js 사용 방법:1.다음 파일 을 같은 디 렉 터 리 아래 에 저장 합 니 다.jquery.js jquery.layzload.js grey.gif 2.필터 가 필요 한 곳 에 다음 과 같은 코드 를 추가 합 니 다: Jquery.LazyLoad.js 플러그 인 수정판 다운로드:lazyload.rarJquery.LazyLoad.js 플러그 인 매개 변수 상세 설명:LazyLoad 플러그 인의 일부 매개 변 수 를 설명 하여 사용자 에 게 더욱 적절 한 효 과 를 제공 합 니 다.1.그림 으로 미리 자리 잡기 placeholder:"img/grey.gif",인자:placeholder,값 은 그림 경로 입 니 다.이 그림 은 불 러 올 그림 의 위 치 를 차지 하고 그림 을 불 러 올 때 자리 잡 은 그림 은 2 를 숨 깁 니 다.어떤 효 과 를 사용 하 는 지 불 러 옵 니 다 effect:"fadein",매개 변수:effect(특수효과),값 은 show(직접 표시),fadein(페이드인),slideDown(드 롭 다운)등 을 사용 합 니 다.threshold:200 을 미리 불 러 옵 니 다.인자:threshold,값 은 숫자 로 페이지 높이 를 대표 합 니 다.200 으로 설정 하면 스크롤 바 가 목표 위치 에서 200 높이 가 남 았 을 때 그림 을 불 러 옵 니 다.사용자 가 눈치 채 지 못 하 게 할 수 있 습 니 다.4.이벤트 가 실 행 될 때 만 이벤트:"click"을 불 러 옵 니 다.인자:event,값 은 click(클릭),mouseover(마우스 스 크 래 치),sporty(운동)가 있 습 니 다.foobar(...).마우스 로 그림 을 막 거나 클릭 해서 불 러 올 수 있 습 니 다.이후 두 값 은 테스트 되 지 않 았 습 니 다.5.한 용기 의 그림 에 효과 container:$("\container"),인자:container,값 은 한 용기 입 니 다.lazyload 는 기본적으로 브 라 우 저 스크롤 바 를 끌 때 유효 합 니 다.이 매개 변 수 는 특정한 DIV 스크롤 바 를 끌 때 그림 6 을 순서대로 불 러 올 수 있 습 니 다.그림 정렬 이 혼 란 스 러 울 때 failuremit:10,인자:failuremit,값 은 숫자 입 니 다.lazyload 는 기본적으로 보 이 는 영역 에 없 는 첫 번 째 그림 을 찾 을 때 더 이상 불 러 오지 않 지만 HTML 용기 가 혼 란 스 러 울 때 보 이 는 영역 내 그림 이 불 러 오지 않 은 상황 이 발생 할 수 있 습 니 다.failuremit 은 보 이 는 영역 밖의 그림 을 불 러 와 서 이 문제 가 발생 하지 않도록 하 는 것 을 의미 합 니 다.