1. Foreword
Lazy Loading Technology (lazyload) is not a new technology, it is the JS programmer of the Web page performance optimization of a scheme. The core of lazyload is load on demand. There are lazyload figures in large websites, such as Google's image search page, Thunder home, Taobao, QQ space and so on. So mastering Lazyload technology is a good choice, but the jquery plugin Lazy load official website (http://www.appelsiini.net/projects/lazyload) said does not support the new browser.
What is the suitable application of 2.lazyload in the occasion?
Related to pictures, falsh resources, IFRAME, Web page editor (similar to FCK) occupy a large bandwidth, and these modules are not in the browser viewable area, so you can use lazyload at the appropriate time to load the class of resources. Avoid loading too many resources when the page is opened, so that the user waits too long.
3. How to achieve lazyload?
The difficulty of lazyload is how to load the resources the user needs at the right time (where the user needs resources that are rendered in the browser's viewable area). So we need to know a few things to determine if the target is present in the customer area, including:
1. Viewable area relative to browser top position
2. The resource to be loaded is relative to the top position of the browser.
After the above two-point data is obtained, the following function is used to determine whether an object is in the viewable area of the browser.
Copy Code code as follows:
Returns the location of the viewable area 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 resource location to load
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};
}
where function getclient () returns the browser client area information, Getsubclient () returns the destination module region information. Determining whether the target module appears in the client area is actually determining if the top two rectangles intersect.
Copy Code code as follows:
Determines whether two rectangles intersect and returns 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) < W1 && Math.Abs (TC1-TC2) < H1;
}
Now we can basically implement the delay loading, and then we'll write some code in the Window.onscroll event to monitor whether the target area is present in the client area.
Copy Code code as follows:
<div style = "width:100px; height:3000px "></div>
<div id = "D1" style = "width:50px"; height:50px; Background:red;position:absolute; top:1000px ">
</div>
var D1 = document.getElementById ("D1");
Window.onscroll = function () {
var prec1 = getclient ();
var prec2 = getsubclient (D1);
if (Intens (PREC1,PREC2)) {
Alert ("true")
}
}
We just need to load the resources we need in the pop-up window.
It is worth noting that the target object renders in the customer area, and the pop-up window continues as it scrolls. Therefore, we need to remove the monitoring of the area after the first window is ejected, where an array is used to collect the objects that need to be monitored. Note also that because the Onscroll event and the OnResize event change the viewer visual area information, it is necessary to recalculate whether the target object is in the viewable area after the class event is triggered, and this is accomplished using the AutoCheck () function. (Thunder home Lazyload did not recalculate the target object in the OnResize event in the browser viewable area, so if the browser window is narrowed to a certain size after scrolling to the area that needs to load the picture, click to maximize, the picture loading does not come out, hehe, need attention later).
add element: <div id = "D2" style = "width:50px"; height:50px; Background:blue;position:absolute; top:2500px ">
Copy Code code as follows:
//Compare whether a child region renders in the browser area
function jiance (arr,prec1,callback) {
V AR prec2;
for (var i = arr.length-1 i >= 0; i--) {
if (Arr[i]) {
PREC2 = getsubclient (Arr[i]);
if (Intens (PREC1,PREC2)) {
Callback (arr[i));
//After loading resources, delete monitoring
Delete arr[i];
}
}
}
//detect if the target object appears in the client area
function AutoCheck () {
var prec1 = Getclient ();
Jiance (arr,prec1,function (obj) {
//load resource ...
Alert (obj.innerhtml)
})
}
//Sub-region one
var D1 = document.getElementById ("D1");
//Child region two
var d2 = document.getElementById ("D2");
//need to load zone collection on Demand
var arr = [D1,D2];
Window.onscroll = function () {
//recalculate
AutoCheck ();
}
Window.onresize = function () {
//recalculation
AutoCheck ();
}
Now we just need to load the window where we need the resources. The source code will not be posted. If you need a friend, or a place of doubt, you can contact me.
