Native javascript implements image scrolling and delayed loading functions _ javascript skills

This article mainly introduces how to use native javascript to implement image scrolling and delayed loading. the ideas and methods are shared with you and hope to help you. 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.

The 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 // 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:

The 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 // 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.