Javascript-based image lazy loading

This article mainly introduces the methods and ideas for javascript to implement image lazy loading. Sometimes we need to use lazy loading, that is, to delay loading of images to improve the website's affinity, for more information, see the following definition.

Image delayed loading is also called lazy loading. It is used to load some images only when the image is delayed or meets certain conditions. It is usually used for webpages with many images. It can reduce the number of requests or the number of delayed requests and optimize the performance.

Ii. presentation form

[1] Delayed loading. setTimeout or setInterval is used for loading delay. If the user leaves before loading, the loading will naturally not be performed.
[2] Conditional loading: starts asynchronous loading only when certain conditions are met or certain conditions are triggered.
[3] The visible area is loaded, and only the area that the user can see is loaded. This is mainly implemented by the monitoring scroll bar. Generally, loading starts when the user sees the bottom edge very close, this ensures that the image will not be paused for a long time when the user pulls down the image.

3. Basic Steps

[1] All images on the webpage are set to the same image
[2] Add the data-original = "img/test.jpg" attribute to the image to save the real address of the image.
[3] when certain conditions are triggered, the src attribute of the image in the region is automatically changed to a real address.

Iv. Application

1. click the button to display the image

 DocumentAttach ImagesScript var oBtn = document. getElementsByTagName ('click') [0]; var oImg = document. images [0]; oBtn. onclick = function () {oImg. src = "img/loading.gif"; if (oImg. dataset) {aftLoadImg (oImg, oImg. dataset. original);} else {aftLoadImg (oImg, oImg. getAttribute ("data-original");} function aftLoadImg (obj, url) {var oImg = new Image (); oImg. onload = function () {obj. src = oImg. src;} oImg. src = url;} script

2. display images in the visible area

 Document
 
 
  
  
  
  
  
  
  
  
  
  
  
  
    
  
  
  
  
  
  
  
  
  
  
  
              
 
 
 《script》var oBtn = document.getElementsByTagName('button')[0];var aImages = document.images;loadImg(aImages);window.onscroll = function(){  loadImg(aImages);};function loadImg(arr){  for( var i = 0,len = arr.length; i < len; i++){    if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){      arr[i].isLoad = true;      arr[i].style.cssText = "transition: ''; opacity: 0;"      if(arr[i].dataset){        aftLoadImg(arr[i],arr[i].dataset.original);        }else{        aftLoadImg(arr[i],arr[i].getAttribute("data-original"));      }      (function(i){        setTimeout(function(){          arr[i].style.cssText = "transition: 1s; opacity: 1;"        },16)      })(i);    }  }}function aftLoadImg(obj,url){  var oImg = new Image();  oImg.onload = function(){    obj.src = oImg.src;  }  oImg.src = url;} 《script》  

The above is all the content in this article. I hope it will be helpful for your learning and smooth javascript image lazy loading.

For more articles about javascript-based image lazy loading, refer to the PHP Chinese website!