JavaScript implementation Picture lazy Loading (lazyload) _javascript tips

Lazy load meaning (why to use lazy load)

The biggest impact on the page load speed is the picture, a normal picture can reach several m size, and the code may be only dozens of KB. When the page picture many, the page loading speed is slow, several s clock inside the page did not load completes, may lose many users.

So, for the picture too many pages, in order to speed up the page loading speed, so many times we need to the page does not appear in the visual area of the picture first do not load, wait until scrolling to the visual area before loading. This will greatly enhance the performance of the page loading, but also improve the user experience.

Principle

Point the IMG tag src in the page to a small picture or src is empty, and then define DATA-SRC (this attribute can be custom named, I use DATA-SRC) attribute to point to the real picture.

When the page is loaded, the DATA-SRC attribute value of the IMG tag in the viewable area is first negative to SRC, and then the scrolling event is monitored to load the picture that the user is about to see. This will enable lazy loading.

Code

Before you write code, you need to know the various heights. Read this article first Scrolltop,offsettop,scrollleft,offsetleft

Javascript

<script>
var num = document.getelementsbytagname (' img '). length;
var img = document.getelementsbytagname ("img");
var n = 0; Store the location where the picture is loaded, avoid traversing lazyload () from the first picture each time
;//page load is loaded but the picture in the area
window.onscroll = lazyload;
function Lazyload () {//Listening page scrolling event
var seeheight = document.documentElement.clientHeight;//visible Area height
var scrolltop = Document.documentElement.scrollTop | | Document.body.scrollTop; scroll bar distance top height for
(var i = n; i < num; i++) {
if (Img[i].offsettop < Seeheight + scrolltop) {
if (img[i ].getattribute ("src") = = "") {
img[i].src = Img[i].getattribute ("data-src");
}
n = i + 1;
}
}
</script>

Jquery

<script>
var n = 0,
imgnum = $ ("img"). Length,
img = $ (' img ');
Lazyload ();
$ (window). Scroll (lazyload);
function Lazyload (event) {for
(var i = n; i < Imgnum i++) {
if (Img.eq (i). Offset (). Top < parseint ($ window ). Height ()) + parseint ($ (window). scrolltop ())) {
if (Img.eq (i). attr ("src") = = "") {
var src = img.eq (i). attr (" Data-src ");
Img.eq (i). attr ("src", src);
n = i + 1;
}}} </script>

If you feel this article is not detailed enough to introduce, you can refer to this article:

How JavaScript implements picture lazy loading (lazyload) improve the user experience (enhanced version)

The above is a small set of JavaScript to introduce the implementation of the picture lazy loading (lazyload), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!