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

Pinduoduo’s bargaining logic and strategic marketing methods!

Many people often receive price-cutting links fro...

20 rules for short video ads to go viral!

Brand advertisers want to achieve results, and pe...

How to write copy that will wow users? Try these 3 methods

What exactly is “resonance”? Why do some articles...

Brand Marketing: How to build a personal brand?

This article will give you a clear answer once an...

Is Toutiao’s promotion effective? How much does it usually cost?

Toutiao promotion is a combination of information...

What are open links and black links? Things to note when buying open links and black links!

The day before yesterday, when I was chatting wit...

4 suggestions for writing articles for public accounts

The author of this article will share with us 4 o...

Android launches privacy sandbox

Posted by Anthony Chavez, Vice President of Produ...

If you see a numbered butterfly, post it online immediately!

This year, Guangzhou has experienced the longest ...

How does a live broadcast pitcher create a live broadcast with a GMV of over 100 million?

Brands focus on products, anchors focus on conten...

What should we do if the ocean also loses hair? Its "hair transplanter" turns out to be seaweed

Produced by: Science Popularization China Author:...

When an asthma attack occurs, why do people in movies and TV shows always use paper bags to breathe? Can this save lives?

If I tell you that this can really save lives, yo...

[Popular Science China Star Chasing Dreams] Long Picture | The "Supercomputing Youth" Behind the "God of Calculation"

...

Chemical touch: Can we feel real touch in the virtual world?

...

TabBarView

introduce TabBarView implements the category menu...