Lazy loading

About lazy loading

Before talking about the picture of lazy loading, let's talk about lazy loading. Lazy loading is also known as lazy loading, lazy loading, etc., there is a nice English name is "lazyload". It should be noted, is not just lazy loading images patent, Javascript is also a function of the concept of lazy loading , and asynchronous Loading in Javascript there is a LazyLoad library , and pictures of lazy loading libraries ( lazyload ) with two completely concept, which must be clear, so as not to confuse the concept.

Lazy loading images What does it mean? Why use it? As more and more rich things on our page, we find that the page loading speed is getting slower, and loading pictures is undoubtedly the HTTP request inside the bulk. In fact, many times, you put the whole page finished loading, but the user does not slide to the bottom, that is to say a lot of things actually loaded in vain. Because the bulk of the picture is loaded, so we acquire a picture surgery , we assume that, if you try to load an HTML page, the picture is not loaded first, when the user will slide down the page, the picture appears in the viewable area, and then the picture loaded, so you can start to open the HTTP page request to reduce the amount, which is inert to load the image.

achieve

Lazy loading implementation picture is actually very simple.

In the HTML file you need lazy loading of image src attribute set to a same address (usually set to a loading chart), so this figure will only be loaded once (ie, the second will read caching), or simply as null (bad user experience), and in other properties (such as data-original property) addresses the real picture storage
Listening to events (such as the scroll event), it is determined whether the image needs to be loaded has been inactive in the visible region, and if so, replace the src attribute value of the attribute data-original

Then we simply write the code.

First of all, the first step in accordance with the real picture address hidden in the data-original property. I assume that all images must be lazy loading, if real development is certainly the first screen of the picture, its src can point directly to the real address.

<ul>
  <li class='lazy'><img data-original='images/0.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/1.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/2.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/3.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/4.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/5.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/6.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/7.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/8.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/9.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/10.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/11.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/12.jpg' src='images/loading.gif'/></li>
</ul>

View Code

Because I put all the pictures are set to lazy loading mode, and the first screen image needs to be displayed directly, here I wrote init () function, the comments in the code are:

function the init () {
   var Images = the document.images;
   // Load the first screen image 
  for ( var I = 0, len = images.length; I <len; I ++ ) {
     var obj = Images [I];
     // if visible region and had not yet been loaded 
    IF (obj.getBoundingClientRect () Top <&& document.documentElement.clientHeight.! {obj.isLoad) 
      obj.isLoad = to true ;
       // first call method HTML5 
      IF (obj.dataset) 
        imageLoaded (obj, obj.dataset.original); 
      the else  
        imageLoaded (obj, obj.getAttribute ( 'Data-Original')); 
    } The else {   // assumed that the image tag sequence and the actual pages in the same order in the HTML 
      BREAK ; 
    } 
  } 
}

View Code

Wrote a code imageLoaded () function to address the real point of the picture elements, if direct data-original property value points to the picture of the src attribute, then, to see a section of the picture may appear, first picture is fully loaded, then assign the pictures appear, the experience was much better.

function imageLoaded(obj, src) {
  var img = new Image();
  img.onload = function() {
    obj.src = src;
  };
  img.src = src;
}

OK, then we listen scroll event. When a user slides the pages, images appear in the visible region, then load the picture.

window.onscroll = function() {
  lazyload();
};

function lazyload() {
  var lazy = 0;
  var images = document.images;
  for (var i = 0, len = images.length; i < len; i++) {
    var obj = images[i];
    if (obj.getBoundingClientRect().top - lazy < document.documentElement.clientHeight && !obj.isLoad) {
      obj.isLoad = true;
      if (obj.dataset) 
        imageLoaded(obj, obj.dataset.original);
      else 
        imageLoaded(obj, obj.getAttribute('data-original'));
    }
  }
}

Sometimes pictures can not just go when loaded at the visible region, and slightly "pre-load", can be adjusted under lazyload () lazy parameter function.

If the "blunt" picture shows the experience is not good, you can also point out fade-out effects, specifically did not say, you can see the complete code Github

In this way, a simple DEMO picture lazy loading is complete!

PS: While lots of lazy loading, but also have a "non-lethal" shortcomings affect SEO. Because the pictures are replaced with a fake picture, it will affect the collection of pictures, so this function is not recommended for use in the details page

achieve

Guess you like