LazyLoad lazy loading (loading on demand)_javascript skills

1: Actual needs
Large websites are often conflicted. They want users to see more things on the homepage, but they don’t want to waste too much server traffic. For example, a homepage with 3 screens. Maybe 50% of users enter the homepage to click on the link on the homepage to go to the sub-page.
Then our website loads all content for 3 screens for 100% of users. If content can be loaded on demand. You can save more resources and make more good applications.

2: Solution
Use client language to determine the user's current visible range, and only load content within the user's visible range. The main thing is the pictures. Because text information is relatively small, other multimedia content takes up more server traffic.
3: Demonstration example (provided at the end)
4: Analysis
First we need to analyze that this effect will have an outermost container. He included that some content needs to be delayed loaded. The container may generally be the browser window itself (window), or a DIV with scroll bars.
OK, we have to get some parameters of this container. For example, visible width, visible height, horizontal roll to width, vertical roll to height. I use the following program.
　4.1: Get container object properties

Copy code The code is as follows:

_this.docInfo=function(){//Get container-related information
var d={},db= (wf)? document.body : warpper,
dd=(wf) ? document.documentElement : 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 ;//Scroll vertically to remove height
d.jleft=(wf) ? db.scrollLeft dd.scrollLeft : db.scrollLeft;//Scroll horizontally to remove width
//The width of the rolled window. If you use two added divs to curl, just use scrollLeft.
$j("bbb").innerHTML=d.offh ',' d.offw ',' d.jtop ',' d.jleft
return d;
}
//Note that to obtain the visible area of ​​a non-window object in a non-IE browser, use offsetHeight and offsetWidth (the same as IE)
// To obtain the visible area of ​​the window object under non-IE, you need to use window.innerWidth and window.innerHeight
//That is to say, the visual area acquisition of window and non-window objects under non-IE is different.

4.2: Get information about loading content
We mainly get the distance between the loading object and the page container object.
There will be a BUG in IE 6 and 7

Copy code 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,

Copy code 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 o.offsetTop Under chrome, you have to wait for window.onload before you can correctly obtain
};

　4.3: Load the main program
　He is mainly responsible for loading the objects currently within the visible range. Then we must go through all the objects to be loaded. Determine whether the object is currently loading.
Then load him. I will have a picture below. (The method may not be very good)

Copy code 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] 0 ? true : false,
jjj=hereline[2 ] - imgs[i][2] 0 ? true : false;
if(jj && jjj){
imgall [i].innerHTML ='th' (j) 'load';
imgs[i][1]=undefined;
}
}
}
if( j > = imgs.length){//Determine whether all loading has been completed
//Cancel time binding
alert("All loading has been completed, the program will no longer be executed")
warpper.onscroll=null;
warpper.onresize=null;
}
}

I don’t really like my judgment program, but I haven’t found it yet, or I don’t understand a better algorithm. So I’ll use this first.
The general meaning: use the visible height of the container, the scroll height of the container - the distance between the object and the distance from the container > The container is visible and the height or width of the object itself proves that it is within the loading range. (Tongue twister)
We must also exclude objects that have already been loaded. Because the loaded objects also satisfy the above formula, there can be less judgment at the same time.
imgs[i][1]=undefined;
if(imgs[i][1] != undefined){//Determine whether the current object has been loaded
Special attention (see picture)

Look at A B C D above. There are 4 different corners exposed within the visual range. So these 4 objects need to be loaded.

If you only consider a certain point of the object or a certain line to determine whether the object is within the visible range, it may bring a bad experience.

Due to the above situation, it also adds difficulty to our programming (judging whether it is within the visible range).

My above method can be completed. (If you find any bugs, please give me some pointers. In fact, I’m a little dizzy too.)



Finally there are a few tricks, such as

1: Load all objects It's over. You should remove the container object event triggering.

2: Try to optimize the algorithm for judging whether the object is within the visible range or the traversed object. Can save a lot of browser resources.

3: cloudgamer also mentioned a delayed trigger, which is to quickly slide the scroll bar. Delaying it is also a small optimization.

5: Recommended articles

by cloudgamer He explained it in detail and did it better than me. So it is recommended to learn this effect of his. I also borrowed many things from him.

Also, thank you for his advice. Lazyload delay loading effect
6: My source code

Copy code The code is as follows: