Home > Article > Web Front-end > Implementing lazy loading of images based on javascript

Implementing lazy loading of images based on javascript

高洛峰Original: 2016-12-27 15:30:091167browse

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] Loading of the visible area 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 will be loaded when the user pulls down. It just picks up and there won't be a long pause.

3. Basic steps

[1]Set the pictures in the web page to the same picture
[2]Add data-original = "img/test.jpg" to the picture Attribute, save the real address of the picture
[3] When certain conditions are triggered, automatically change the src attribute of the picture in this area to the real address

4. Application

1. Click the button to display the image

<!DOCTYPE html>
<html>
<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(&#39;button&#39;)[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 the image in the visual area

<!DOCTYPE html>
<html>
<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>
  <li><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
  <li><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
  <li><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
  <li><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>  
  <li><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
  <li><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
  <li><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
  <li><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>              
</ul>
 
<script>
var oBtn = document.getElementsByTagName(&#39;button&#39;)[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: &#39;&#39;; 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>

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.

For more articles related to lazy loading of images based on javascript, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS regular expression to remove spaces and newlines (recommended)Next article：JS regular expression to remove spaces and newlines (recommended)

See more

Implementing lazy loading of images based on javascript

Related articles