Native javascript implements image scrolling, delayed loading, and javascript latency

Native javascript implements image scrolling, delayed loading, and javascript latency

Effect: loading starts only when the image appears in the visible area in the drop-down scroll bar.

Ideas:

(1) img label: place the real image address in the property set by yourself, such as lazy-src.

(2) obtain the height of the img from the page (offset (). top in JQ). The native is:

Img. getBoundingClientRect (). top + document. body. scrollTop | document.doc umentElement. scrollTop

(3) Determine whether the position of the img is in the visible area:

In the visible area of the browser, justTop> scrollTop & offsetTop <(scrollTop + windowHeight). Here, justTop is the image's offsetTop + Image Height.

Copy codeThe Code is as follows:
// Save the document in the variable to reduce the query of the document
Var doc = document;
For (var n = 0, I = this. oImg. length; n <I; n ++ ){
// Obtain the image placeholder image address
Var hSrc = this. oImg [n]. getAttribute (this. sHolder_src );
If (hSrc ){
Var scrollTop = doc. body. scrollTop | doc.doc umentElement. scrollTop,
Required wheight = doc.doc umentElement. clientHeight,
OffsetTop = this. oImg [n]. getBoundingClientRect (). top + scrollTop,
ImgHeight = this. oImg [n]. clientHeight,
JustTop = offsetTop + imgHeight;
// Determine whether the image is visible
If (justTop> scrollTop & offsetTop <(scrollTop + windowHeight )){

This. isLoad (hSrc, n );
}
}

}

The following code details:

Copy codeThe Code is as follows:
Function LGY_imgScrollLoad (option ){
This. oImg = document. getElementById (option. wrapID). getElementsByTagName ('img ');
This. sHolder_src = option. holder_src;
This.int ();
}
LGY_imgScrollLoad.prototype = {
LoadImg: function (){
// Save the document in the variable to reduce the query of the document
Var doc = document;
For (var n = 0, I = this. oImg. length; n <I; n ++ ){
// Obtain the image placeholder image address
Var hSrc = this. oImg [n]. getAttribute (this. sHolder_src );
If (hSrc ){
Var scrollTop = doc. body. scrollTop | doc.doc umentElement. scrollTop,
Required wheight = doc.doc umentElement. clientHeight,
OffsetTop = this. oImg [n]. getBoundingClientRect (). top + scrollTop,
ImgHeight = this. oImg [n]. clientHeight,
JustTop = offsetTop + imgHeight;
// Determine whether the image is visible
If (justTop> scrollTop & offsetTop <(scrollTop + windowHeight )){
// Alert (offsetTop );
This. isLoad (hSrc, n );
}
}

}
},
IsLoad: function (src, n ){
Var src = src,
N = n,
O_img = new Image (),
_ That = this;
O_img.onload = (function (n ){
_ That. oImg [n]. setAttribute ('src', src );
_ That. oImg [n]. removeAttribute (_ that. sHolder_src );
}) (N );
O_img.src = src;

},
Int: function (){
This. loadImg ();
Var _ that = this,
Timer = null;
// Scroll: Add a timer to prevent frequent loadImg calls.
Window. onscroll = function (){
ClearTimeout (timer );
Timer = setTimeout (function (){
_ That. loadImg ();
},100 );
}
}
}

:

The above is all the content in this article. The implementation effect is no worse than the implementation of the jQuery plug-in. The code is still concise. For more information, see.