jquery lazyload Picture Delay loading principle (1/2)

Now this kind of picture load delay effect is mainly applied in the picture more site, like Taobao this kind of mall class, this can save a lot of bandwidth resources, today we talk about how to use the jquery lazyload component to achieve only loading visual area picture surface.

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 you get the above two points, you can draw the following function to determine whether an object is

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.
The code is 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;
}

home 1 2 last