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

As a community operator, do you still want to stick with it?

I think there is some truth to these three doubts...

What are the methods and means for new media operations to attract new users?

For new media operations , attracting new users n...

Summary of Through Train Promotion Skills

1. About Through Train If you want to do a good j...

Is product homogeneity serious? 4 dimensions to teach you how to break through successfully!

If you are a company that produces cosmetic conta...

How to start a new takeaway store "Seven Steps to Build 9999+" Practical Operation of a New Takeaway Store with Ten Thousand Orders

Training course content: Let’s start with the thr...

Which is the coldest planet in the solar system? Where is the coldest place in the universe?

Curious children ask: What is the coldest planet ...

Can I continue to take oseltamivir to prevent influenza during the flu season? It is not recommended to do so. A better way to prevent influenza is to →

gossip "You can continue to take oseltamivir...

Attention! What happens if the itinerary code has an "asterisk"? Does it affect your travel? Read this article to learn more

Recently some friends discovered Your own travel ...

QQ update! The new function is simple and crude, no longer worry about voice being eavesdropped

Report! Tencent is here again, bringing the lates...

December marketing hotspot calendar, keep it!

In the blink of an eye, there is only one month l...

CHJ Automotive's Li Xiang praises AutoPilot. Is Tesla's autonomous driving really reliable?

Recently, Li Xiang said: "The new version of...

WeChat Android version 8.0.17 beta version released: sending messages has animation display (with developer content)

Recently, WeChat Android platform ushered in the ...

What changes will occur in your body if you eat and drink heavy-tasting food for a long time?

The pace of life is fast nowadays, and many peopl...

Himalaya FM-AARRR traffic funnel model analysis report!

With the rise of knowledge payment, audio payment...

Using video previews on the App Store might be a bad marketing strategy

When Apple first released iOS 8 last September, t...