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

The temperature difference between day and night on the moon is huge. How do astronauts land on the moon?

On July 21, 1969, the US Apollo 11 spacecraft suc...

After checking in at so many "Shuizhai Miao" bubbles, even the "mud" is so beautiful!

Songyuan City, also known as "Bodune, New Ci...

iPhone is going to kill the password: Apple wants to replace it with Face ID and fingerprint

Are you tired of typing your password manually wh...

The "super racetrack" of the microscopic world: China plans to build the world's most powerful "particle bumper car"

Produced by: Science Popularization China Author:...

Advertising tips for wedding photography agencies!

During the epidemic, the wedding photography indu...

Analysis of Huaxizi and Winona’s private domain marketing!

Private domain marketing is not a new term, but p...

A brief discussion on Android log analysis

【51CTO.com Quick Translation】It is well known tha...

WeChat external link regulations have been updated: These behaviors are not allowed

WeChat recently announced that it will upgrade th...

Is it reliable to install "WiFi" at a depth of 10,000 meters under the sea?

For reprinting, business cooperation, please scan...

How does WeChat Mini Program obtain data?

Q: How does WeChat Mini Program obtain data? A: G...

Exclusive interview with BroadLink's Liu Zongru: Let intelligence change people's minds

[[121352]] As the current wave of smart hardware ...

Top 10 Marketing Observations in 2020: Integration of Advertising and Private Domain Traffic

A sudden epidemic in 2020 not only affected every...

Science illustration: Transportation joins hands with energy to build a harmonious future for humans and nature

...

10 Tips for Developing with Storyboards

Rather than going into a comprehensive guide on h...

Yonsei University College of Medicine: Research finds that AI can diagnose autism in children with 100% accuracy by screening eye photos

The researchers took pictures of the children'...