Large websites are prone to conflicts. users who want to see more things on the homepage do not want to waste too much server traffic. For example, a three-screen homepage. Maybe 50% of users enter the home page to click the connection of the home page to go to The subpage.
1: actual needs
Large websites are prone to conflicts. users who want to see more things on the homepage do not want to waste too much server traffic. For example, a three-screen homepage. Maybe 50% of users enter the home page to click the connection of the home page to go to The subpage.
Therefore, our website loads all the content on three screens for 100% of users. If you can load content as needed. You can save more resources and make better applications.
2: Solution
The client language is used to determine the current visible range of the user and only load the content within the visible range of the user. The most important thing is the image. Because the text information is relatively small, other multimedia content occupies more server traffic.
3: Demo (provided at the end)
4: Resolution
First, we need to analyze that this effect will have an exclusive container. He included the need for delayed loading of some content. A container may be a browser window or a DIV with a scroll bar.
OK. We must obtain some parameters of this container. For example, visible width, visible height, horizontal volume width, and vertical volume height. I use the following program.
4.1: Get container object attributes
The Code is as follows:
_This.doc Info = function () {// get container Information
Var d ={}, db = (wf )? Document. body: warpper,
Dd = (wf )? Document.doc umentElement: warpper;
If (sys. ie ){
D. offh = dd. offsetHeight; // visible area H
D. offw = dd. offsetWidth; // visible area W
} Else {
If (wf ){
D. offw = window. innerWidth; // visible area H
D. offh = window. innerHeight; // visible area W
} Else {
D. offh = dd. offsetHeight; // visible area H
D. offw = dd. offsetWidth; // visible area W
}
}
D. jtop = (wf )? Db. scrollTop + dd. scrollTop: db. scrollTop; // vertical volume height
D. jleft = (wf )? Db. scrollLeft + dd. scrollLeft: db. scrollLeft; // horizontal volume removal width
// The width of the window to be rolled out. Use scrollLeft to directly use the curly sum of two p values.
$ J ("bbb"). innerHTML = d. offh + ',' + d. offw + ',' + d. jtop + ',' + d. jleft
Return d;
}
// Use offsetHeight and offsetWidth (same as IE) to obtain the visible area of a non-window object in a non-IE browser)
// Use window. innerWidth and window. innerHeight to obtain the visible area of the window object under non-IE
// That is to say, obtaining the visible area of a non-IE window object is different from that of a Non-window object.
4.2: Get the information of the loaded content
We mainly obtain the distance between the loaded object and the page container object.
IE 6 7 has a BUG
The Code is as follows:
Wtop = sys. ie? (Sys. ie [1] = '6. 0' | sys. ie [1] = '7. 0 ')? 0: warpper. offsetTop: warpper. offsetTop,
Wleft = sys. ie? (Sys. ie [1] = '6. 0' | sys. ie [1] = '7. 0 ')? 0: warpper. offsetLeft: warpper. offsetLeft,
The Code is as follows:
Getoff = function (o) {// get the offw and offh of the IMG object
O. innerHTML = (o. offsetTop-wtop) + ',' + (o. offsetLeft-wleft );
Return (o. offsetTop-wtop) + ',' + (o. offsetLeft-wleft );
// Note that o. offsetTop can be correctly obtained only after window. onload in chrome.
};
4.3: load the main program
It is mainly responsible for loading objects in the visible range. Then we must traverse all objects to be loaded. Determines whether the object is currently being loaded.
Then load it. I will have a picture below. (Method may not be good)
The Code is as follows:
_ This. Load = function (){
Var hereline = [];
Hereline [1] = doc. offh + doc. jtop;
Hereline [2] = doc. offw + doc. jleft;
For (I = 0; iif (imgs [I] [1]! = Undefined) {// determine whether the current object has been loaded
Var jj = hereline [1]-imgs [I] [1] <doc. offh + 130 & hereline [1]-imgs [I] [1]> 0? True: false,
Jjj = hereline [2]-imgs [I] [2] <doc. offw + 270 & hereline [2]-imgs [I] [2]> 0? True: false;
If (jj & jjj ){
Imgall [I]. innerHTML + = 'dide' + (++ j) + 'load ';
Imgs [I] [1] = undefined;
}
}
}
If (j> = imgs. length) {// determine whether all data has been loaded.
// Cancel the time binding
Alert ("all loaded, the program will not be executed ")
Warpper. onscroll = null;
Warpper. onresize = null;
}
}
I don't like my judgment program very much, but I haven't found it yet, or I don't understand better algorithms. So we should use this first.
General meaning: Use the visible height of the container + the rolling height of the container-the distance between the object and the container> the visible height of the container + the height or width of the object itself to prove that the object is in the loading range. (Tongue twisters)
We must also exclude loaded objects. Because the loaded object meets the above formula, it can be judged less.
Imgs [I] [1] = undefined;
If (imgs [I] [1]! = Undefined) {// determine whether the current object has been loaded
Special note (see the figure)
Look at a B C D. Four different corners are exposed in the visible range. Therefore, these four objects need to be loaded.
If you only consider a certain point of an object or a line to determine whether the object is in a visible range, it may bring a bad experience.
In this case, it also increases the difficulty for our programming (determining whether it is within the visible range.
The above method can be completed. (If any BUG is found, please give me some advice. In fact, I am also a little dizzy .)
There are several other tips, such
1: All objects have been loaded. You should remove the container object event trigger.
2: Try to optimize the algorithm for determining whether an object is in a visible range or traversing an object. Saves a lot of browser resources.
3: cloudgamer also mentions a latency trigger, that is, a quick sliding scroll bar, which is also a small optimization.
5. Recommended articles
Cloudgamer is more detailed than I do. Therefore, we recommend that you learn this effect. I also learned a lot from him.
Another is to thank him for his guidance. Lazyload delayed loading effect
6: My source code
The Code is as follows:
Lazyload
