Delayed image loading

Catch a cold. This week's status is very poor and groose! I have a good rest at home for two days. Today I have a little bit better. When I am awake, I have a feature that I arranged on my tab. The picture is loaded with delay! Thanks to Ferris for its instance website (http://fgm.cc/learn )! Although no... SyntaxHighlighter. all ();

Catch a cold. This week's status is very poor and groose! I have a good rest at home for two days. Today I have a little bit better. When I am awake, I have a feature that I arranged on my tab. The picture is loaded with delay! Thanks to Ferris for its instance website (http://fgm.cc/learn )! Although there are no tutorials, the code is written in a very regular way, which makes it easy to understand. It is suitable for beginners like us to learn and play a very good guiding role!

First, paste the Code:
Window. onload = window. onscroll = window. onresize = function (){
Var box = document. getElementById ("body ");
Var allimg = box. getElementsByTagName ("img ");
Var oimg = noLoadImg (allimg );
Var iScrollTop=document.doc umentElement. scrollTop | document. body. scrollTop;
Var iclientheight?document.doc umentElement. clientHeight + iScrollTop;
Var itop = ibottom = 0;
Var oParent = null;
If (oimg. length)
{
For (var I = 0; I {
OParent = oimg [I]. parentElement;
Itop = pageY (oParent );
Ibottom = itop + oParent. offsetHeight;
If (itop> iScrollTop & itop IScrollTop & ibottom {
Loadimg (I, oimg );
}
}
}
// Unloaded Image
Function noLoadImg (imglist)
{
Var noloadimg = [];
For (var I = 0; I {
If (imglist [I]. className! = "Loaded ")
{
Noloadimg. push (imglist [I]);
}
}
Return noloadimg;
}
// Fade-in Image
Function loadimg (j, oimg)
{
Var timer = null, alpha = 0;
Timer = setInterval (function (){
Oimg [j]. src = oimg [j]. attributes ["imgurl"]. nodeValue;
Oimg [j]. className = "loaded ";
Alpha + = 2;
If (alpha> 100) {alpha = 100 };
Oimg [j]. style. opacity = alpha/100;
Oimg [j]. style. filter = "alpha (opacity =" + alpha + ")";
If (alpha = 100) {clearInterval (timer )};
}, 20)
}
// A function of Ferris
// Obtain the Y axis of the object relative to the form height-compatible with ie
Function pageY (element ){
Return element. offsetTop + (element. offsetParent? Arguments. callee (element. offsetParent): 0)
}
}

What I do is to place the link address of the image in the custom attribute of Img, and then call the link assigned to Img in js. You can also put the link address of the image in the array. This depends on your wishes.
It is mainly because all the img elements on the current page can be displayed, and the page image that is not displayed in the current window will not load the link address. The method is to use the relative page height of the current img superior element or its own relative page height (because there is usually a border or spacing, the relative height of the superior is more accurate: personal Understanding) determines whether it is in the current page, and displays the content within it. Other operations are not performed, attach a class to the operated Img element to distinguish the loaded and unloaded img elements, and then bind them to the event.
The code is neither object-oriented nor encapsulated. It's just self-learning. The compatibility issue has not been solved, and the relative height of the element in IE6 is determined to be problematic. As a result, there is a problem with the loading area. Then I referenced the relatively high operating function of ferris and learned something!
Html:

Demo address: http://cowll.com/demo/LazyLoad.html

Keep improving on your work at any time. You are neither a programmer nor a designer. What you do is to make the browser a stage for you and make the web page a prop for you, opening your webpage is your audience. This drama has just been staged!

 

From Jmarry