자바스크립트 지연 로딩 기술(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) 　 } 이제 기본적으로 창에 일부를 작성할 수 있습니다. onscroll 이벤트

코드를 복사합니다


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

　

　

　

　 var d1 = document.getElementById("d1");
Window.onscroll = function(){
　 var prec1 = getClient(); var prec2 = getSubClient(d1);
if(intens(prec1,prec2)){
Alert("true")

}
팝업 창에 필요한 리소스만 로드하면 됩니다.
여기서 주목해야 할 점은 대상 개체가 클라이언트 영역에 표시되면 팝업 창이 다음과 같이 계속해서 팝업된다는 점입니다. 따라서 먼저 팝업을 띄워야 합니다. 창 이후 이 영역의 모니터링을 취소하려면 여기서 배열을 사용하여 모니터링해야 할 개체를 수집합니다. 또한 onscroll 이벤트와 onresize 이벤트는 브라우저의 가시 영역 정보를 변경하므로 이러한 유형의 이벤트가 트리거된 후 대상 개체가 가시 영역에 있는지 다시 계산해야 합니다. () 함수는 이를 달성하기 위해 사용됩니다.(Thunder 홈페이지의 Lazyload 대상 객체가 브라우저의 가시 영역에 있는지 여부는 onresize 이벤트에서 다시 계산되지 않습니다. 따라서 먼저 브라우저 창을 특정 크기로 줄이면 , 이미지를 로드해야 하는 영역으로 스크롤한 다음 최대화를 클릭하면 이미지가 로드되지 않습니다. 하하, 나중에 필요합니다.

요소 추가:

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

// 브라우저 영역에 특정 하위 영역이 있는지 비교
function jiance(arr,prec1,callback){
var prec2;
for(var i = arr.length - 1 ; i >= 0 ;i--){
if(arr[i]) {
　 prec2 = getSubClient(arr[i] );
if(intens(prec1,prec2)){
콜백(arr[i]);
모니터링 삭제
　　　 delete arr[i] = getClient(); arr,prec1,function(obj){
　　　 //리소스 로드...
　　 Alert(obj.innerHTML)
　　})
　}
//하위 영역 1
　 var d1 = document.getElementById("d1");
//하위 영역 2개
var d2 = document.getElementById("d2")
//눌러야 함 영역 컬렉션을 로드해야 함
var arr = [d1,d2];
window.onscroll = function(){
// 다시 계산
autocheck();
}
window.onresize = function(){
　　 / / Recalculate
　 autocheck();

이제 팝업 창에 필요한 리소스만 로드하면 됩니다. 필요하신 분이나 질문이 있으신 분은 저에게 연락주세요.