Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JS-懒加载（原生）-- php培训十期线上班
Blogger Information
Blog 22
fans 1
comment 1
visits 22227
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS-懒加载（原生）-- php培训十期线上班
Miss灬懒虫
Original
821 people have browsed it

JS-tab标签页（原生）

关于案例

当前案例，还存在一个小问题，就是页面加载如果不滚动一下鼠标，就一直是默认图片，不过懒加载的原理还是能看出来滴，多多包涵哦！

JS代码中有一些说明注释，可以详细看一下哦！

运行效果

案例代码

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JS基础-懒加载的原理与范例</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         body{
  12.             background-color: #cccccc;
  13.         }
  14.         h2{
  15.             line-height: 30px;
  16.             text-align: center;
  17.             margin: 10px auto;
  18.         }
  19.         img{
  20.             width: 400px;
  21.             height: 400px;
  22.             border: 1px dashed #cccccc;
  23.             margin-bottom: 10px;
  24.             display: block;
  25.         }
  26.         .lazy-container{
  27.             width: 400px;
  28.             background-color: #ffffff;
  29.             margin: 0 auto;
  30.             padding: 20px;
  31.             border-radius: 6px;
  32.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <h2>懒加载-范例</h2>
  38.     <div class="lazy-container">
  39.         <img src="images/temp.jpg" alt="" al="" data-src="images/1.jpg">
  40.         <img src="images/temp.jpg" alt="" al="" data-src="images/2.jpg">
  41.         <img src="images/temp.jpg" alt="" al="" data-src="images/3.jpg">
  42.         <img src="images/temp.jpg" alt="" al="" data-src="images/4.jpg">
  43.         <img src="images/temp.jpg" alt="" al="" data-src="images/5.jpg">
  44.         <img src="images/temp.jpg" alt="" al="" data-src="images/6.jpg">
  45.         <img src="images/temp.jpg" alt="" al="" data-src="images/7.jpg">
  46.         <img src="images/temp.jpg" alt="" al="" data-src="images/8.jpg">
  47.         <img src="images/temp.jpg" alt="" al="" data-src="images/9.jpg">
  48.         <img src="images/temp.jpg" alt="" al="" data-src="images/10.jpg">
  49.         <img src="images/temp.jpg" alt="" al="" data-src="images/11.jpg">
  50.         <img src="images/temp.jpg" alt="" al="" data-src="images/12.jpg">
  51.         <img src="images/temp.jpg" alt="" al="" data-src="images/13.jpg">
  52.         <img src="images/temp.jpg" alt="" al="" data-src="images/14.jpg">
  53.         <img src="images/temp.jpg" alt="" al="" data-src="images/15.jpg">
  54.         <img src="images/temp.jpg" alt="" al="" data-src="images/16.jpg">
  55.         <img src="images/temp.jpg" alt="" al="" data-src="images/17.jpg">
  56.         <img src="images/temp.jpg" alt="" al="" data-src="images/18.jpg">
  57.         <img src="images/temp.jpg" alt="" al="" data-src="images/19.jpg">
  58.         <img src="images/temp.jpg" alt="" al="" data-src="images/20.jpg">
  59.         <img src="images/temp.jpg" alt="" al="" data-src="images/21.jpg">
  60.         <img src="images/temp.jpg" alt="" al="" data-src="images/22.jpg">
  61.         <img src="images/temp.jpg" alt="" al="" data-src="images/23.jpg">
  62.         <img src="images/temp.jpg" alt="" al="" data-src="images/24.jpg">
  63.     </div>
  64.     <script src="js/lazy.js"></script>
  65. </body>
  66. </html>

lazy.js

  1. /**
  2.  * 概念：
  3.  * 1-可视区：我们可以直接看见的 页面内容区域;
  4.  * 2-滚动距离：可是区边框，距离文档顶部的距离
  5.  * （一个web页面一般都存在滚动条，滚动距离就是滚出的部分）;
  6.  * 3-相对顶部距离：就是页面元素，相对于文档顶部的距离（也就是HTML标签）;
  7.  * 
  8.  * 涉及属性：
  9.  * 1-document.documentElement: 文档根节点 HTML标签;
  10.  * 2-clientHeight: 当前元素可视区的高度；
  11.  * 3-scrollTop: 当前元素的滚动距离；
  12.  * 4-offsetTop: 当前元素相对顶部距离
  13.  * 
  14.  * 原理：
  15.  * 1-整个页面的可视区是HTML标签的区域；
  16.  * 2-如果当前元素的 `相对顶部距离`>= 可视区高度+滚动距离，那么就加载元素
  17.  * 否则暂不加载；
  18.  */
  20. //获取所有图片
  21. var imgs = document.querySelectorAll('img');
  23. //获取页面可视区高度
  24. var clientHeight = document.documentElement.clientHeight;
  27. //滚动事件监听器
  28. window.addEventListener('scroll',function(event){
  29.     //获取滚动距离
  30.     var scrollTop = document.documentElement.scrollTop;
  32.     //遍历图片，根据是否在可视区域，替换 src属性值
  33.     imgs.forEach(function(img){
  34.         if(img.offsetTop<=(clientHeight+scrollTop)){
  35.             img.src=img.dataset.src;
  36.         }
  37.     });
  38. },false);
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post