자바스크립트 지연 로딩 기술(lazyload)_javascript 기술의 간단한 구현

1. 서문
지연 로딩 기술(Lazyload라고도 함)은 js 프로그래머가 웹 페이지 성능을 최적화하기 위한 솔루션입니다. 지연 로드의 핵심은 대규모 로딩에서 찾을 수 있습니다. 예를 들어 Google의 이미지 검색 페이지, Thunder 홈페이지, Taobao, QQ space 등이 있습니다. 따라서 지연 로드 기술을 익히는 것이 좋습니다. 불행하게도 jquery 플러그인 지연 로드 공식 웹사이트(http://www.appelsiini. net/projects/lazyload)에서는 새 버전의 브라우저를 지원하지 않는다고 합니다.

2. 어떤 상황에 레이지로드가 더 적합합니까?
대역폭을 많이 차지하는 사진, 플래시 리소스, iframe, 웹 페이지 편집기(FCK와 유사) 등이 포함됩니다. 모듈은 당분간 브라우저에서 사용할 수 없습니다. 적절한 시간에 이러한 유형의 리소스를 로드하기 위해 지연 로드를 사용할 수 있습니다.

3. Layload 구현 방법
Lazyload의 어려움 사용자가 필요한 리소스를 적절한 시점에 로드하는 방법(여기서 사용자가 필요로 하는 리소스는 브라우저의 가시 영역에 표시되는 리소스를 의미함) ). 따라서 대상이 클라이언트 영역에 표시되었는지 확인하려면 다음을 포함하여 여러 가지 정보를 알아야 합니다:
　1. 브라우저 상단을 기준으로 한 시각적 영역의 위치
2. 위치
위의 두 가지 데이터 지점을 얻은 후 다음 함수를 사용하여 개체가 브라우저의 표시 영역에 있는지 확인할 수 있습니다.

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

// 브라우저의 가시 영역 위치를 반환합니다.
function getClient() {
var l,t,w,h;
l = document.documentElement.scrollLeft || document.body.scrollLeft;
t = document.documentElement.scrollTop || 🎜> w = document.documentElement.clientWidth; .documentElement.clientHeight;
Return {'left':l,'top':t,'width':w,'height':h}
; 🎜> //로드할 리소스 위치로 복귀
function getSubClient(p){
var l = 0,t = 0,w,h
w = p.offsetWidth; > h = p.offsetHeight;
while(p.offsetParent ){
　l = p.offsetLeft;
　t = p.offsetTop;
　 p = p.offsetParent; 'height':h } ;
}


　 getClient() 함수는 브라우저 클라이언트 영역 영역 정보를 반환하고, getSubClient() 함수는 대상 모듈 영역 정보를 반환합니다. 이때 대상 모듈이 클라이언트 영역에 나타나는지 여부를 판단하는 것은 실제로 위의 두 직사각형이 교차하는지 여부를 판단하는 것입니다. 코드는 다음과 같습니다.


// 두 직사각형이 교차하는지 확인하고 부울 값을 반환합니다.
function intens(rec1,rec2){

var lc1,lc2,tc1,tc2, w1,h1> lc1 = rec1.left rec1.width / 2;
lc2 = rec2.left rec2.width / 2
tc1 = rec1.top rec1.height / 2; = rec2.top rec2 .height / 2;

　 w1 = (rec1.width rec2.width) / 2 　 h1 = (rec1.height rec2.height) / 2; return Math.abs( lc1 - lc2) < ; w1 && Math.abs(tc1 - tc2) < h1 ; 　 } 이제 기본적으로 창에 일부를 작성할 수 있습니다. onscroll 이벤트

코드를 복사합니다


코드는 다음과 같습니다. 🎜>

　< div 스타일 = "너비:100px; 높이:3000px">

　

　

　 var d1 = document.getElementById("d1");
Window.onscroll = function(){
　 var prec1 = getClient();