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

3 Principles of To B Case Marketing

Case marketing is a very practical topic that To ...

Band-Aid or Band-Aid? Stomach-strengthening tablets or digestion-promoting tablets? Be careful not to buy the wrong ones!

Review expert: Wang Xuejiang, professor at Capita...

Patrick tells us that it’s okay to evolve to have heads all over the body…

===...

How to promote a newly launched App? A complete guide to starting an app promotion

In recent years, mobile Internet has been at the ...

Exclusive interview: An article that helps you truly understand DSP advertising

Although DSP and information flow have been aroun...

When is the 40th anniversary of Shenzhen? What will be the big gift package for Shenzhen’s 40th anniversary?

On August 26, 1980, Shenzhen Special Economic Zon...

No wonder I can’t wear a turtleneck in winter! I found the cause of my long-standing problem...

Today, #Why do some people feel uncomfortable whe...

Goddess crash course: How to build your attractiveness? 12 series of lessons to teach you step by step

A beautiful appearance but a boring soul can only...

The world's largest gambling city: I advise you not to gamble

today Let's go to Las Vegas, known as the &qu...

If your body shows these 3 high-risk signs, it means you are really too tired!

Planning and production Source: Curious Doctor Re...

This brain-burning thought experiment challenges quantum mechanics

As the most famous cultural symbol of quantum mec...

2020 Beginner’s Guide to Private Domain Traffic System!

What is private domain traffic ? This is a relati...

Astra: Fight again and again despite repeated failures, so what if the rocket flies

On August 29, 2021, Astra's "Rocket 3.3&...

LeTV mobile phone is coming: it has been registered with the Ministry of Industry and Information Technology

LeTV's mobile phone, whose launch date has be...

Ward's Top 10 Engines of 2018 released: Japanese cars are the big winners, no German brands are on the list

In most people's impressions, Germany's a...