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

Kuaishou Information Stream Advertising Guide

Short videos have become the main carrier of info...

Can humans achieve immortality? Can consciousness exist apart from the body?

There is a question that has always troubled mank...

User growth fission method!

“Create 50 communities in 48 hours at zero cost” ...

How does this content sharing community achieve user growth?

Using Jianshu V2.11.2, draw the product structure...

Google releases Android 5.1 with device protection features

March 10 news, according to foreign media reports...

Full signal = fast internet speed? The truth is far from what you think

In our daily lives, whether we are browsing our p...

Analysis of B Station’s advertising promotion!

Nowadays, content marketing has become an indispe...

Practical skills for APP promotion - IOS 100-character keyword coverage!

As a newbie ASO er, I have read the company's...

What is Chaoshan? Fresh and lively!

This is a place your tongue knows better than you...