Load pictures on demand (pictures are lazy to load)

Posted by Popgun on Tue, 04 Jun 2019 19:20:39 +0200

Preface

Loading pictures as needed is a very useful feature that not only improves the performance of the website, but also saves you traffic.For friends who use virtual hosts, if your website is a picture website or a website with more pictures, then lazy loading of pictures is a must.

principle

The principle of lazy loading of pictures is also very simple, and the scr attribute of pictures is not assigned by default.When certain conditions are met, the picture address is taken out and assigned to the src attribute.Generally, in order to make the site page have a better user experience, we set a default picture for all pictures in advance, such as one pixel or any other picture (as long as you like).

Practice Code

Let's start with this Demo: http://yunkus.com/demo/load-images-on-demand/

The example uses a mentioned effect (CSS 3). If you want to use more effects, you can download the animate.css library and try different effects.You won't go into much of this here, but you can refer to the use of the animate.css library here:

Animate.css using tutorials (a powerful CSS3 animation library).

CSS Style

    

  1.  .lazy-img-box {
    2. 

  2.      margin: 0 auto;
    3. 

  3.      width: 430px;
    4. 

  4.      overflow: hidden
    5. 

  5.  }
    6. 

    7. 

  7.  .lazy-img-box li {
    8. 

  8.      list-style: none;
    9. 

  9.      float: left;
    10. 

  10.      width: 400px;
    11. 

  11.      height: 200px;
    12. 

  12.      margin-right: 12px;
    13. 

  13.      margin-bottom: 12px;
    14. 

  14.  }
    15. 

    16. 

  16.  .lazy-img-box li img {
    17. 

  17.      width: 400px;
    18. 

  18.      height: 200px;
    19. 

  19.      display: block;
    20. 

  20.  }
    21. 

    22. 

  22.  .animated {
    23. 

  23.      -webkit-animation-duration: 1s;
    24. 

  24.      animation-duration: 1s;
    25. 

  25.      -webkit-animation-fill-mode: both;
    26. 

  26.      animation-fill-mode: both;
    27. 

  27.  }
    28. 

    29. 

  29.  @-webkit-keyframes fadeIn {
    30. 

  30.      from {
    31. 

  31.          opacity: 0;
    32. 

  32.      }
    33. 

  33.      to {
    34. 

  34.          opacity: 1;
    35. 

  35.      }
    36. 

  36.  }
    37. 

    38. 

  38.  @keyframes fadeIn {
    39. 

  39.      from {
    40. 

  40.          opacity: 0;
    41. 

  41.      }
    42. 

  42.      to {
    43. 

  43.          opacity: 1;
    44. 

  44.      }
    45. 

  45.  }
    46. 

    47. 

  47.  .fadeIn {
    48. 

  48.      -webkit-animation-name: fadeIn;
    49. 

  49.      animation-name: fadeIn;
    50. 

  50.  }
    51.

HTML Code

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Load pictures on demand (pictures are lazy to load)-Cloud Library Network</title>
    6. 

  6.     <meta name="description" content="Loading pictures on demand not only improves site performance, but also saves you a lot of traffic!" />
    7. 

  7.     <meta name="keywords" content="JavaScript Course,Load pictures on demand,Picture Lazy Loading" />
    8. 

  8.     <link rel="stylesheet" href="./index.css">
    9. 

  9. </head>
    10. 

  10. <body>
    11. 

  11.     <ul class="lazy-img-box">
    12. 

  12.         <li><img _src="http://yunkus.com/demo/lib/images/demo-1.jpg" src="./images/loading.gif" alt=""></li>
    13. 

  13.         <li><img _src="http://yunkus.com/demo/lib/images/demo-2.jpg" src="./images/loading.gif" alt=""></li>
    14. 

  14.         <li><img _src="http://yunkus.com/demo/lib/images/demo-3.jpg" src="./images/loading.gif" alt=""></li>
    15. 

  15.         <li><img _src="http://yunkus.com/demo/lib/images/demo-4.jpg" src="./images/loading.gif" alt=""></li>
    16. 

  16.         <li><img _src="http://yunkus.com/demo/lib/images/demo-5.jpg" src="./images/loading.gif" alt=""></li>
    17. 

  17.         <li><img _src="http://yunkus.com/demo/lib/images/demo-6.jpg" src="./images/loading.gif" alt=""></li>
    18. 

  18.         <li><img _src="http://yunkus.com/demo/lib/images/demo-7.jpg" src="./images/loading.gif" alt=""></li>
    19. 

  19.         <li><img _src="http://yunkus.com/demo/lib/images/demo-8.jpg" src="./images/loading.gif" alt=""></li>
    20. 

  20.         <li><img _src="http://yunkus.com/demo/lib/images/demo-9.jpg" src="./images/loading.gif" alt=""></li>
    21. 

  21.         <li><img _src="http://yunkus.com/demo/lib/images/demo-1.jpg" src="./images/loading.gif" alt=""></li>
    22. 

  22.         <li><img _src="http://yunkus.com/demo/lib/images/demo-2.jpg" src="./images/loading.gif" alt=""></li>
    23. 

  23.         <li><img _src="http://yunkus.com/demo/lib/images/demo-3.jpg" src="./images/loading.gif" alt=""></li>
    24. 

  24.         <li><img _src="http://yunkus.com/demo/lib/images/demo-4.jpg" src="./images/loading.gif" alt=""></li>
    25. 

  25.         <li><img _src="http://yunkus.com/demo/lib/images/demo-5.jpg" src="./images/loading.gif" alt=""></li>
    26. 

  26.         <li><img _src="http://yunkus.com/demo/lib/images/demo-6.jpg" src="./images/loading.gif" alt=""></li>
    27. 

  27.         <li><img _src="http://yunkus.com/demo/lib/images/demo-7.jpg" src="./images/loading.gif" alt=""></li>
    28. 

  28.         <li><img _src="http://yunkus.com/demo/lib/images/demo-8.jpg" src="./images/loading.gif" alt=""></li>
    29. 

  29.         <li><img _src="http://yunkus.com/demo/lib/images/demo-9.jpg" src="./images/loading.gif" alt=""></li>
    30. 

  30.     </ul>
    31. 

  31.     <script src="./index.js"></script>
    32. 

  32. </body>
    33. 

  33. </html>
    34.

JavaScript Code

    

  1. window.onload = function () {
    2. 

  2.     var lazyImg = document.getElementsByTagName("img");
    3. 

  3.     var lazyImgLen = lazyImg.length;
    4. 

  4.     var lazyImgArray = [];
    5. 

  5.     var winowBroswerHeight = document.documentElement.clientHeight;
    6. 

    7. 

  7.     // Initial First Screen Picture
    8. 

  8.     loadImg();
    9. 

    10. 

  10.     // Execute method of loading pictures while scrolling
    11. 

  11.     window.onscroll = loadImg;
    12. 

    13. 

  13.     // Load pictures on demand
    14. 

  14.     function loadImg() {
    15. 

  15.         for (var i = 0; i < lazyImgLen; i++) {
    16. 

  16.             var getTD = getTopDistance(lazyImg[i]);
    17. 

  17.             var getST = getScrollTop();
    18. 

  18.             if (!lazyImg[i].loaded && getST < getTD && getTD < (getST + winowBroswerHeight)) {
    19. 

  19.                 lazyImg[i].src = lazyImg[i].getAttribute("_src");
    20. 

  20.                 lazyImg[i].classList.add("animated", "fadeIn");
    21. 

  21.                 lazyImg[i].loaded = true; // Mark as loaded
    22. 

  22.             }
    23. 

  23.         }
    24. 

  24.     }
    25. 

  25.     // Gets the distance of the catalog object from the top of the document document
    26. 

  26.     function getTopDistance(obj) {
    27. 

  27.         var TopDistance = 0;
    28. 

  28.         while (obj) {
    29. 

  29.             TopDistance += obj.offsetTop;
    30. 

  30.             obj = obj.offsetParent;
    31. 

  31.         }
    32. 

  32.         return TopDistance;
    33. 

  33.     }
    34. 

  34.     // Get the scroll distance of a scrollbar  
    35. 

  35.     function getScrollTop() {
    36. 

  36.         return document.documentElement.scrollTop || document.body.scrollTop;
    37. 

  37.     }
    38. 

  38. }
    39.

No matter where the scrollbar is, as soon as you refresh it, only the pictures that are on the screen will be loaded.In addition, neither the picture above the screen nor the picture below the screen will be loaded as long as it has not entered the screen area.Such a treatment is theoretically superior, but in the application of practice, it may not develop its original role.Imagine that whether you access a page directly from an address or through a search engine, it usually starts at the top of the page. If you are hygienic and want the code to be simpler, the loadImg() method can be changed to the following code:

    

  1. function loadImg() {
    2. 

  2.     for (var i = 0; i < lazyImgLen; i++) {
    3. 

  3.         var getTD = getTopDistance(lazyImg[i]);
    4. 

  4.         var getST = getScrollTop();
    5. 

  5.         if (!lazyImg[i].loaded && getTD < (getST + winowBroswerHeight)) {
    6. 

  6.             lazyImg[i].src = lazyImg[i].getAttribute("_src");
    7. 

  7.             lazyImg[i].classList.add("animated", "fadeIn");
    8. 

  8.             lazyImg[i].loaded = true; // Mark as loaded
    9. 

  9.         }
    10. 

  10.     }
    11. 

  11. }
    12.

In fact, nothing has changed, but if judgment condition is one less:

  1. getST < getTD

There are exceptions, however, such as when you click a comment from a list page, it is very likely that you skip to the details page and jump directly to the comment area, which is also common when you do not need to change the code to achieve optimal results.

There is also a small problem here. For scroll listening events, write window.onscroll = function(){} as above, only one page can be used, and only one will work if other landowners also use this scroll listening event.Event binding can be used to solve this problem here, and specific methods can be found here: Frequently-used JavaScript Function Encapsulation.


From: http://yunkus.com/load-images-on-demand/

Topics: Javascript Attribute css3 network

Hot Topics

©2024 Programmer Think