Objective
Lazy Loading Technology (lazyload) is not a new technology, it is JS programmer of the Web page performance optimization of a scheme. The core of lazyload is load on demand. In large sites have lazyload figure, 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 version of the browser.
What is the appropriate application of lazyload?
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 while the Web page is open, allowing users to wait too long.
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:
- The viewable area is relative to the top of the browser;
- 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.
returns the location of 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
Copy Code code as follows:
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= "Div1" style= "width:50px; height:50px; background:red; Position:absolute; top:1000px ">
</div>
Copy Code code as follows:
var div1 = document.getElementById ("Div1");
Window.onscroll = function () {
var prec1 = getclient ();
var prec2 = getsubclient (DIV1);
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 when the target object renders in the customer area, the pop-up window continues as it scrolls. So 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 while the logic of the monitoring is drawn out. Also note that both the Onscroll event and the OnResize event will change the viewer visual area information, and therefore need to be recalculated after the class event is triggered, which is implemented using the AutoCheck () function.
add element:
Copy Code code as follows:
<div id= "Div2" style= "width:50px; height:50px; Background:blue; Position:absolute; top:2500px ">
Copy Code code as follows:
Compare whether a child region is rendered in the browser area
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)) {
Callback (Arr[i]);
After loading the resource, delete the monitoring
Delete Arr[i];
}
}
}
}
Copy Code code as follows:
Detects 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");
Sub-Region II
var D2 = document.getElementById ("D2");
Need to load zone collection on demand
var arr = [D1, D2];
Window.onscroll = function () {
Recalculate
AutoCheck ();
}
Window.onresize = function () {
Recalculate
AutoCheck ();
}
