Large Web sites are often contradictory, want users to see more things on the home page, and do not want to waste too much server traffic. For example, a home page with 3 screens. Perhaps 50% of users into the home page is to click on the link to the subpage.
So our site has loaded all 3 screens for 100% of users. If you can load content on demand. We can save more resources and do more good applications.
The client language is used to determine the user's current visual range, and only the contents of the user's viewable range are loaded. The most important is the picture. Because of the relatively small amount of text information, other multimedia content has more to do with server traffic.
First we have to analyze that the effect will have a outermost container. He included a delay in loading some content. The container may be either the browser window itself (window), or a div with a scroll bar.
OK, we have to get some parameters for this container. For example, visual width, visual height, horizontal roll to width, vertical roll to height. I use the following program.
We mainly get the distance from the loading object from the Page container object.
He is primarily responsible for loading current objects within the visual range. Then we have to go through all the objects that we want to load. Determines whether the object is in the current load.
then loaded him. I'll have a picture below. (method may not be very good)
I don't really like my judgment, but I haven't found it yet, or I don't understand the better algorithm. So we use this first.
General meaning: With the visual height of the container + container scrolling Height-object distance from container distance > container visible + object itself high or wide to prove in the loading range. Twister
We must also exclude objects that have already been loaded. Because the loaded objects also meet the above formula, but also can be less to judge some.
if (imgs[i][1]!= undefined) {//To determine whether the current object has been loaded
See figure A B C D. There are 4 different angles in the visual range. So these 4 objects need to be loaded.
It can be a bad experience to consider only a point in an object, or a line to determine whether the object is visible.
Because of the above, it also gives us the difficulty of programming (judging whether it's visible or not).
The method above me can be done. (If you find any bugs, please give me directions.) Actually, I'm a little dizzy, too. ）
1: The objects are all loaded. You should remove the container object event trigger.
2: As far as possible to determine whether the object in the visual range, or traversal of the object algorithm. Can save a lot of browser resources.
3:cloudgamer also mentions a delay trigger, which is a fast sliding scroll bar, and a delay is also a small optimization.
Cloudgamer He spoke in detail, and better than I did. So recommend to learn the effect of his OH. Many things I have borrowed from him.
And thanks for his advice. Lazyload Delay Loading effect
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>lazyload</title>
<body>
<style type= "Text/css" >
body{margin:0px; padding:0; font-size:12px;}
. jelle_box{width:270px height:129px; border:1px solid #CCC; float:left;
</style>
<input type= "button" value= "Restart" onclick= lazyload (). Judge (); "/>
<div style= "width:100%; height:500px; Overflow:scroll; border:2px solid #999; "id=" JELLE_ABCD ">
<div id= "AAA" style= "width:2500px; height:800px; margin:10px; " >
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
<div class= "Jelle_box" ></div>
</div>
</div>
<div style= "height:30px" id= "BBB" ></div>
<script type= "Text/javascript" >
(function () {
Window.lazyload=function () {
Var _this={},//method Collection
imgsurl=[' Baidu_logo_2.gif ']//was first used to load pictures. Here is a collection of addresses that need to load pictures
imgs=[],//all IMG data format is [[URL,OFFW,OFFH],[URL,OFFW,OFFH]]
i=0,//loop variable
j=0,//to determine the current number of loads
Warpper=document.getelementbyid (' Jelle_abcd '),//window,//container object
wf= (Warpper==window)? True:false;
doc={offw:0,offh:0,jtop:0,jleft:0},//contains some of the current properties of the container object
sys= (function () {//No need to be nervous this is just a function of judging the browser, you can use many methods to judge the browser
var ua=navigator.useragent.tolowercase (), sys={};
Sys.firefox=ua.match (/firefox\/) ([\d\.] +)/);
Sys.ie=ua.match (/msie\s) ([\d\.] +)/);
Sys.chrome=ua.match (/chrome\/) ([\d\.] +)/);
return SYS;
})(),
$J =function (ID) {return document.getElementById (ID);},
Imgall= $j (' aaa '). getElementsByTagName (' DIV '),
Getoff=function (o) {//Get the OFFW and OFFH of an IMG object
Alert (o.width)
O.innerhtml= (o.offsettop-warpper.offsettop) + ', ' + (o.offsetleft-warpper.offsetleft);
Return (O.offsettop-warpper.offsettop) + ', ' + (o.offsetleft-warpper.offsetleft);
Note that o.offsettop must wait for window.onload to be properly captured under Chrome.
};
O.offsettop get the object distance from the top of the browser must subtract the distance from the outside container from the browser. (If you use the window container you don't need it)
(function () {//Initialize container object binding event = =
if (WF) {
Window.onscroll=function () {_this.judge ();};
Window.onresize=function () {_this.judge ();};
}else{
Warpper.onscroll=function () {_this.judge ();}
Warpper.onresize=function () {_this.judge ();}
}
Window.onload=function () {settimeout (_this.judge,500);};
})()
End of container object setting
for (i; ivar Arr=[],off;
Off=getoff (Imgall[i]);
Alert (OFF)
Arr.push (Imgsurl[0]);
Arr.push (Off.split (', ') [0]));
Arr.push (Off.split (', ') [1]));
Imgs.push (arr);
}
_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) {//To 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+= ' first ' + (++J) + ' load ';
imgs[i][1]=undefined;
}
}
}
if (J >= imgs.length) {//To determine if all loads have been completed
Cancel Time Binding
Alert ("All load complete, program will no longer execute")
Warpper.onscroll=null;
Warpper.onresize=null;
}
}
_this.docinfo=function () {//Get information about the container
var d={},db= (WF)? Document.body:warpper,
dd= (WF)? Document.documentElement:warpper;
if (sys.ie) {
d.offh=dd.offsetheight;//Visual Area H
d.offw=dd.offsetwidth;//Visual Area W
}else{
if (WF) {
d.offw=window.innerwidth;//Visual Area H
d.offh=window.innerheight;//Visual Area W
}else{
d.offh=dd.offsetheight;//Visual Area H
d.offw=dd.offsetwidth;//Visual Area W
}
}
d.jtop= (WF)? Db.scrolltop+dd.scrolltop:db.scrolltop//Vertical Roll to Height
d.jleft= (WF)? db.scrollleft+dd.scrollleft:db.scrollleft;//Horizontal Roll to width
The Rolled width window uses the two addition Div's curl to use the scrollleft directly to OK
$j ("BBB"). innerhtml=d.offh+ ', ' +d.offw+ ', ' +d.jtop+ ', ' +d.jleft
return D;
}
Notice that the viewable area of the non-window object is used in non-IE browsers using offsetheight and offsetwidth (same as IE)
To get the visual area of a Window object under non IE, use window.innerwidth and Window.innerheight
That is to say, the visual regions of Windows and Non window objects are not obtained under IE.
_this.judge=function () {//later found no direction to judge
var d=_this.docinfo ();
if (d.jtop!= doc.jtop | | d.jleft!= doc.jleft | | d.offw > DOC.OFFW | | d.offh > DOC.OFFH) {
Determine if you need to perform a load
The condition is the change of Y x or the window size change triggered by the volume
Doc.jtop = D.jtop;
DOC.OFFH = D.OFFH;
Doc.jleft = D.jleft;
DOC.OFFW = D.OFFW;
_this. Load ();//Loader
}
}
SetTimeout (_this.judge,500),//Execute initialization load
SetTimeout prevent the onload and onscroll repeat execution
That's when there was a onscroll, and the onload was first executed.
return _this;
}
})()
Lazyload ();
</script>
</body>
