Analysis of the implementation principle of jquery lazyload lazy loading technology_jquery

Foreword

Lazy loading technology (referred to as lazyload) is not a new technology. It is a solution for js programmers to optimize web page performance. The core of lazyload is loading on demand. Lazyload can be found in large websites, such as Google's image search page, Thunder homepage, Taobao, QQ Zone, etc. Therefore, mastering lazyload technology is a good choice. Unfortunately, the jquery plug-in lazy load official website (http://www.appelsiini.net/projects/lazyload) says that it does not support new browsers.

In what situations is lazyload more suitable?

Involving pictures, flash resources, iframes, web page editors (similar to FCK), etc., take up a lot of bandwidth, and these modules are not in the browser's visible area for the time being, so you can use lazyload to load such resources at the appropriate time. Avoid loading too many resources when the web page is opened and making users wait too long.

How to implement lazyload?

The difficulty of lazyload is how to load the resources that the user needs at the appropriate time (the resources that the user needs here refer to the resources that are presented in the browser's visible area). Therefore we need to know several pieces of information to determine whether the target has been rendered in the client area, including:

• The position of the visible area relative to the top of the browser;
• The position of the resource to be loaded relative to the top of the browser.

After obtaining the above two points of data, you can use the following function to determine whether an object is in the visible area of ​​the browser.
Return the visible area position of the browser

Copy the code The code is as follows:

// Return the visible area position of the browser
function getClient(){
var l, t, w, h;
l = document.documentElement.scrollLeft || document.body .scrollLeft;
t = document.documentElement.scrollTop || document.body.scrollTop;
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
return { left: l, top: t, width: w, height: h };
}

Return to the location of the resource to be loaded

Copy code The code is as follows:

// Return the location of the resource to be loaded
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;
}
return { left: l, top: t, width: w, height: h };
}

The function getClient() returns the browser client area information, and getSubClient() returns the target module area information. At this time, determining whether the target module appears in the client area is actually determining whether the two rectangles above intersect.

Copy code The code is as follows:

// Determine whether two rectangles intersect and return a Boolean Value
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;
tc2 = rec2.top rec2.height / 2;
w1 = (rec1.width rec2.width) / 2;
h1 = (rec1.height rec2.height) / 2;
return Math.abs(lc1 - lc2) }

Now we can basically implement delayed loading. Next, we write some code in the window.onscroll event to monitor whether the target area is presented in the client area.

Copy code The code is as follows:

Copy code The code is as follows:

var div1 = document.getElementById("div1");
window.onscroll = function(){
var prec1 = getClient();
var prec2 = getSubClient(div1);
if (intens(prec1, prec2)) {
alert("true");
}
};

팝업창에서 필요한 리소스만 불러오면 됩니다.
여기서 주목할 점은 대상 개체가 클라이언트 영역에 표시되면 스크롤하면서 팝업창이 계속해서 팝업된다는 점입니다. 따라서 첫 번째 창이 팝업된 후 이 영역에 대한 모니터링을 취소해야 합니다. 여기서는 모니터링해야 할 개체를 수집하기 위해 배열을 사용하는 동시에 모니터링 로직을 추출합니다. 동시에, onscroll 이벤트와 onresize 이벤트는 브라우저의 가시 영역 정보를 변경하므로 여기서는 autocheck() 함수로 구현되는 이러한 유형의 이벤트가 트리거된 후에 다시 계산해야 합니다.
요소 추가:

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

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

// 특정 하위 영역이 브라우저 영역에 렌더링되는지 비교
function jiance(arr, prec1, 콜백){
var prec2;
for (var i = arr.length - 1; i >= 0; i--) {
if (arr[i]) {
prec2 = getSubClient(arr[i]) ;
if (intens(prec1, prec2)) {
callback(arr[i])
// 리소스 로드 후 모니터링 삭제
arr[i] 삭제
}
}
}
}

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

//대상 객체가 클라이언트 영역에 나타나는지 감지
function autocheck(){
var prec1 = getClient()
jiance(arr, prec1, function(obj){
// 리소스 로드...
alert(obj.innerHTML);
})
}
// 하위 영역 one
var d1 = document.getElementById("d1");
// 하위 영역 two
var d2 = document.getElementById("d2")// 영역을 로드해야 함 요청 시 수집
var arr = [d1, d2];
window.onscroll = function(){
// 재계산
　autocheck()
}
window.onresize = function(){
// 재계산
autocheck()