The most practical picture lazy loading solution

The most practical picture lazy loading solution

definition

Image delay loading is also called lazy loading. It delays loading of images or loads certain images only when certain conditions are met. It is usually used for web pages with many images. It can reduce the number of requests or delay the number of requests and optimize performance.
Presentation form [1] Delayed loading, use setTimeout or setInterval to delay loading. If the user leaves before loading, the loading will naturally not proceed.
【2】Conditional loading: asynchronous loading starts only when certain conditions are met or triggered.
【3】Visible area loading, only load the area that the user can see. This is mainly achieved by monitoring the scroll bar. Generally, loading starts when it is very close to the bottom edge that the user can see. This ensures that the image is connected when the user pulls down, and there will be no long pauses.
Basic steps

[1] All images on the webpage are set to the same image [2] Add the attribute data-original = "img/test.jpg" to the image to 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
application

【Click the button to display the image】

  1.  <!DOCTYPE html >  
  2.  < html   lang = "en" >  
  3.  < head >  
  4.  < meta   charset = "UTF-8" >  
  5.  < title > Document </ title >  
  6.  < style >  
  7.  body{
  8.  margin: 0;
  9.  }
  10.  img{
  11.  height: 100px;
  12.  width: 100px;
  13.  }
  14.  </ style >  
  15.  </ head >  
  16.  < body >  
  17.  < button > Load image </ button >  
  18.  < img   src = "#"   alt = "test"   data-original = "img/test.png" >  
  19.  < script >  
  20.  var oBtn = document .getElementsByTagName('button')[0];
  21.  var oImg = document .images[0];
  22.  oBtn.onclick = function (){
  23.  oImg.src = "img/loading.gif" ;
  24.  if (oImg.dataset) {
  25.  aftLoadImg(oImg,oImg.dataset.original);
  26.  }else{
  27.  aftLoadImg(oImg,oImg.getAttribute("data-original"));
  28.  }
  29.  }
  30.  function aftLoadImg(obj,url){
  31.  var oImg = new Image();
  32.  oImg.onload = function (){
  33.  obj.src = oImg.src ;
  34.  }
  35.  oImg.src = url ;
  36.  }
  37.  </ script >  
  38.  </ body >  
  39.  </ html >

【Image displayed in the visible area】

  1.  <!DOCTYPE html>
  2.  <html lang= "en" >
  3.  <head>
  4.  <meta charset= "UTF-8" >
  5.  <title>Document</title>
  6.  <style>
  7.  body{
  8.  margin: 0 ;
  9.  }
  10.  ul{
  11.  margin: 0 ;
  12.  padding: 0 ;
  13.  list-style: none;
  14.  }
  15.  img{
  16.  border: none;
  17.  vertical-align: middle;
  18.  }
  19.  .in{
  20.  border: 1px solid black;
  21.  margin: 10px;
  22.  text-align: center;
  23.  height: 400px;
  24.  width: 400px;
  25.  float : left;
  26.  }
  27.  .in img{
  28.  height: 400px;
  29.  width: 400px;
  30.  }
  31.  </style>
  32.  </head>
  33.  <body>
  34.  <ul class = "list" >
  35.  <li class = "in" ><img src= "img/loading.gif" alt= "Test" data-original = "img/img1.gif" ></li>
  36.  <li class = "in" ><img src= "img/loading.gif" alt= "Test" data-original = "img/img2.gif" ></li>
  37.  <li class = "in" ><img src= "img/loading.gif" alt= "Test" data-original = "img/img3.gif" ></li>
  38.  <li class = "in" ><img src= "img/loading.gif" alt= "Test" data-original = "img/img4.gif" ></li>
  39.  <li class = "in" ><img src= "img/loading.gif" alt= "Test" data-original = "img/img1.gif" ></li>
  40.  <li class = "in" ><img src= "img/loading.gif" alt= "Test" data-original = "img/img2.gif" ></li>
  41.  <li class = "in" ><img src= "img/loading.gif" alt= "Test" data-original = "img/img3.gif" ></li>
  42.  <li class = "in" ><img src= "img/loading.gif" alt= "Test" data-original = "img/img4.gif" ></li>
  43.  </ul> 
  44.  
  45.  <script>
  46.  var oBtn = document.getElementsByTagName( 'button' )[ 0 ];
  47.  var aImages = document.images;
  48.  loadImg(aImages);
  49.  window.onscroll = function(){
  50.  loadImg(aImages);
  51.  };
  52.  function loadImg(arr){
  53.  for ( var i = 0 ,len = arr.length; i < len; i++){
  54.  if (arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){
  55.  arr[i].isLoad = true ;
  56.  arr[i].style.cssText = "transition: ''; opacity: 0;"  
  57.  if (arr[i].dataset){
  58.  aftLoadImg(arr[i],arr[i].dataset.original);
  59.  } else {
  60.  aftLoadImg(arr[i],arr[i].getAttribute( "data-original" ));
  61.  }
  62.  (function(i){
  63.  setTimeout(function(){
  64.  arr[i].style.cssText = "transition: 1s; opacity: 1;"  
  65.  }, 16 )
  66.  })(i);
  67.  }
  68.  }
  69.  }
  70.  function aftLoadImg(obj,url){
  71.  var oImg = new Image();
  72.  oImg.onload = function(){
  73.  obj.src = oImg.src;
  74.  }
  75.  oImg.src = url;
  76.  } 
  77.  
  78.  </script>
  79.  </body>
  80.  </html>

<<:  4 memory usage issues game developers need to pay attention to

>>:  On the 4th anniversary of Jobs' death, Cook sent an internal letter to commemorate him

Recommend

Jiangsu notifies teachers and staff to return to school and work: When can they return to work? When can students return to school?

As the number of confirmed cases of the epidemic ...

Why don’t we find it annoying when Apple’s iOS upgrade rate is so high?

September 17th is an important day for iPhone use...

Chinese scientists discover new cell type, plants can move now!

The world we live in is colorful because of the e...

KOL Marketing: Why are couple KOLs more popular among advertisers?

Seemingly influenced by the advancement of the “s...

The US government handed over the management of Internet domain names, and the era of global co-governance has arrived

Under years of pressure from the international co...

Vegetables and fruits, which one has a higher vitamin C content? The truth is heartbreaking!

gossip: The vitamin C content of fruits is higher...

How much does it cost to attract investment for the Pingliang Moving App? What is the investment price for the Pingliang Moving Mini Program?

Is it easy to attract investment for the Pinglian...

Landing on the moon is not easy! Tests and challenges of the lunar lander on Earth

source,src As the world's enthusiasm for spac...

Anemia, what are the misunderstandings about iron supplementation

Iron is an important essential trace element for ...

10,000-word review experience: How to build a sustainable online and offline operation system

Last month, an independent women's clothing d...

App overseas promotion, basic process and core elements of activity operation!

First, compared with the traditional manufacturin...

Neutered male sheep live longer? Does the same happen in humans?

It is an indisputable fact that the average life ...

More than 20 packages were rejected by the Apple Store in one day. What has the App Store done in the past two months!

Introduction The apps that were rejected this tim...

If these people switch to salt, 1 million deaths can be avoided every year! What kind of salt do you eat at home?

According to the report of World Salt Reduction W...

3 types of scripts for short video planning

A short video script refers to the outline used f...