Implementing lazy loading of images based on javascript_javascript skills-JS Tutorial-php.cn

Implementing lazy loading of images based on javascript_javascript skills

WBOY

Release： 2016-05-16 15:21:45

Original

1144 people have browsed it

1. Definition

Delayed loading of images is also called lazy loading. It delays loading images or only loads certain images when certain conditions are met. It is usually used for web pages with many images. You can reduce the number of requests or delay the number of requests to optimize performance.

2. Presentation form

【1】Delayed loading, use setTimeout or setInterval to delay loading. If the user leaves before loading, it will naturally not load.
【2】Conditional loading, asynchronous loading starts only when certain conditions are met or certain conditions are triggered.
[3] Visual area loading only loads the area that the user can see. This is mainly implemented by monitoring the scroll bar. Generally, it starts loading when it is very close to the bottom edge that the user sees. This ensures that the image is connected when the user pulls down. , there won’t be a long pause.

3. Basic steps

【1】All pictures on the webpage are set to the same picture
【2】Add the attribute data-original = "img/test.jpg" to the image and save the real address of the image
【3】When certain conditions are triggered, automatically change the src attribute of the image in the area to the real address

4. 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>加载图片</button>
<img src="#" alt="测试" 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>

Copy after login

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="测试" data-original = "img/img1.gif"></li>
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>  
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
  <li class="in"><img src="img/loading.gif" alt="测试" 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>

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone's learning and successfully implement lazy loading of javascript images.