Of Stack

javascript based image lazy load

  • 2020-11-18 06:07:27
  • OfStack

Definition 1.

Image lazy loading is also known as lazy loading, lazy loading of pictures or meet some conditions before loading some pictures, usually used for more pictures of web pages. You can reduce or delay the number of requests and optimize performance.

2. Presentation

[1] Delay loading. setTimeout or setInterval are used for loading delay. If the user leaves before loading, it will not be loaded naturally.
[2] Conditional loading. Asynchronous loading starts only when certain conditions are met or triggered.
[3] Visual area loading only loads the area that the user can see. This is mainly implemented by monitoring the scroll bar. It starts to load when it is close to the bottom that the user can see, so as to ensure that the image is connected when the user drops down without too long pause.

3. Basic steps

[1] All the pictures in the webpage are set as the same picture
[2] Add data-ES17en = "img/ test.jpg "to the image to save the real address of the image
[3] When certain conditions are triggered, the src attribute of the image in this area is automatically changed to the real address

4. The application

1. Click the button to display the picture 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
  margin: 0;
}
img{
  height: 100px;
  width: 100px;
}
</style>
</head>
<body>
<button> Loading pictures </button>
<img src="#" alt=" test " data-original = "img/test.png">
<script>
var oBtn = document.getElementsByTagName('button')[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>  
</body>
</html>

2. Display pictures in the visual area 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
  margin: 0;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
img{
  border: none;
  vertical-align: middle;
}
.in{
  border: 1px solid black;
  margin: 10px;
  text-align: center;
  height: 400px;
  width: 400px;
  float: left;
}
.in img{
  height: 400px;
  width: 400px;
}
</style>
</head>
<body>
<ul class="list">
  <li class="in"><img src="img/loading.gif" alt=" test " data-original = "img/img1.gif"></li>
  <li class="in"><img src="img/loading.gif" alt=" test " data-original = "img/img2.gif"></li>
  <li class="in"><img src="img/loading.gif" alt=" test " data-original = "img/img3.gif"></li>
  <li class="in"><img src="img/loading.gif" alt=" test " data-original = "img/img4.gif"></li>  
  <li class="in"><img src="img/loading.gif" alt=" test " data-original = "img/img1.gif"></li>
  <li class="in"><img src="img/loading.gif" alt=" test " data-original = "img/img2.gif"></li>
  <li class="in"><img src="img/loading.gif" alt=" test " data-original = "img/img3.gif"></li>
  <li class="in"><img src="img/loading.gif" alt=" test " data-original = "img/img4.gif"></li>              
</ul>

<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>  
</body>
</html>

Above is the entire content of this article, I hope to help you learn, smooth implementation of javascript image lazy load.

Related articles: