手册   游戏   WEB   字典   单词   在线工具  

页面性能优化 - 原生 JS 实现图片懒加载

在项目开发中, 我们往往会遇到一个页面需要加载很多图片的情况. 我们可以一次性加载全部的图片, 但是考虑到用户有可能只浏览部分图片. 所以我们需要对图片加载进行优化, 只加载浏览器窗口内的图片, 当用户滚动时, 再加载更多的图片. 这种加载图片的方式叫做图片懒加载, 又叫做按需加载或图片的延时加载. 这样做的好处是: 1. 可以加快页面首屏渲染的速度; 2. 节约用户的流量.

一. 实现思路

1. 图片 img 标签自定义一个属性 data-src 来存放真实的地址.

2. 当滚动页面时, 检查所有的 img 标签, 判断是否出现在事业中, 如果出现在视野中, 继续进行判断, 看齐是否被加载过了, 如果没有加载, 那就进行加载.

判断图片元素是否处于浏览器视野中的示意图 (手绘):

二. 根据思路完成代码如下:

  1. <!DOCTYPE html>
  2. <HTML lang="en">
  3.   
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <title>
  7.       原生 JS 实现图片懒加载
  8.     </title>
  9.     <style>
  10.       *{ margin: 0; padding: 0; box-sizing: border-box; } ul{ overflow: hidden;
  11.       list-style: none; } li{ float: left; width: 50%; height: 200px; padding:
  12.       10px; } li img{ display: inline-block; width: 100%; height: 100%; }
  13.     </style>
  14.   </head>
  15.   
  16.   <body>
  17.     <div class="container">
  18.       <ul>
  19.         <li>
  20.           <img src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
  21.         </li>
  22.         <li>
  23.           <img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">
  24.         </li>
  25.         <li>
  26.           <img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">
  27.         </li>
  28.         <li>
  29.           <img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg">
  30.         </li>
  31.         <li>
  32.           <img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg">
  33.         </li>
  34.         <li>
  35.           <img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg">
  36.         </li>
  37.         <li>
  38.           <img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg">
  39.         </li>
  40.         <li>
  41.           <img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg">
  42.         </li>
  43.         <li>
  44.           <img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg">
  45.         </li>
  46.         <li>
  47.           <img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg">
  48.         </li>
  49.         <li>
  50.           <img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">
  51.         </li>
  52.         <li>
  53.           <img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg">
  54.         </li>
  55.         <li>
  56.           <img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">
  57.         </li>
  58.         <li>
  59.           <img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">
  60.         </li>
  61.         <li>
  62.           <img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
  63.         </li>
  64.         <li>
  65.           <img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
  66.         </li>
  67.       </ul>
  68.     </div>
  69.     <script>
  70.       // Windows 绑定滚动事件
  71.       Windows.addEventListener('scroll',
  72.       function() {
  73.         // 遍历所有的 img 标签
  74.         Array.prototype.slice.apply(document.getElementsByTagName('li')).forEach((li) = >{
  75.           let img = li.getElementsByTagName('img')[0];
  76.           // 判断当前 img 是否出现在了视野中
  77.           // 判断当前 img 是否被加载过了
  78.           if (checkShow(img) && !isLoaded(img)) {
  79.             loadImg(img);
  80.           }
  81.         })
  82.       });
  83.       // 判断 img 是否出现浏览器视野中
  84.       function checkShow(img) {
  85.         let scrollTop = document.documentElement.scrollTop; // 页面向上滚动的高度
  86.         let windowHeight = Windows.innerHeight; // 浏览器自身高度
  87.         let offsetTop = img.offsetTop; // 目标标签相对于 document 的高度
  88.         return (offsetTop > scrollTop && offsetTop < (windowHeight + scrollTop));
  89.       }
  90.       // 判断是否已经加载过
  91.       function isLoaded(img) {
  92.         return img.getAttribute('src') === img.getAttribute('data-src');
  93.       }
  94.       // 加载图片
  95.       function loadImg(img) {
  96.         img.setAttribute('src', img.getAttribute('data-src'));
  97.       }
  98.     </script>
  99.   </body>
  100.  
  101. </HTML>

好了, 在浏览器中运行一下, 第一次进页面如果不滚动滚轮的话什么也看不到, 所以第一次进页面需要调用 checkShow(), 处于视野中的图片也加载出来.

在代码最后加上:

  1. // 第一次进页面加载处于视野中的图片
  2.  Array.prototype.slice.apply(document.getElementsByTagName('li')).forEach((li)=>{
  3.     let img=li.getElementsByTagName('img')[0];
  4.     // 判断当前 img 是否出现在了视野中
  5.     // 判断当前 img 是否被加载过了
  6.     if(checkShow(img) && !isLoaded(img)){
  7.       loadImg(img);
  8.     }
  9.   })

此时我们发现判断加载视野中的图片代码存在重复, 直接封装成一个新的方法 lazyRenderImg();

  1. // Windows 绑定滚动事件
  2.   Windows.addEventListener('scroll',function(){
  3.     // 遍历所有的 img 标签
  4.     lazyRenderImg();
  5.   });
  6. function lazyRenderImg(){
  7.  Array.prototype.slice.apply(document.getElementsByTagName('li')).forEach((li)=>{
  8.       let img=li.getElementsByTagName('img')[0];
  9.       // 判断当前 img 是否出现在了视野中
  10.       // 判断当前 img 是否被加载过了
  11.       if(checkShow(img) && !isLoaded(img)){
  12.         loadImg(img);
  13.       }
  14.     })
  15.   }
  16.   // 第一次进页面加载处于视野中的图片
  17.   lazyRenderImg();

三. 性能优化

问题: Windows.scroll 方法页面只要一滚动就会触发里面的方法, 对性能影响很大

解决方法: 当页面停止滚动的时候, 再去执行页面中的方法, 类似与函数节流 (throttle)

Tips: 函数节流: 等时间间隔执行函数, 让一个函数不要执行得太频繁, 减少一些过快的调用来节流.

  1. // Windows 绑定滚动事件
  2.   let timer;
  3.   Windows.addEventListener('scroll',function(){
  4.     console.log('scroll')
  5.     // 遍历所有的 img 标签
  6.     if(timer){
  7.       clearTimeout(timer)
  8.     }
  9.     timer=setTimeout(()=>{
  10.       console.log('lazyRenderImg...');
  11.       lazyRenderImg();
  12.     },300);

通过打印的日志发现当滚动停止后才执行 lazyRenderImg 方法的, 确实减少了不必要调用 lazyRenderImg 的次数.

页面性能优化之图片懒加载就写这么多了, 网页优化还有很多方法与技巧, 前端路漫漫其修远兮, 吾将上下而求索. 本文不足之处, 请多指正.

参考资料:

https://www.jianshu.com/p/1b32e16ed0e5

来源: https://www.cnblogs.com/peerless1029/p/10771695.html


与本文相关文章

  1. 原生 JS 点击按钮加载更多数据
  2. JavaScript 加载性能优化的方法
  3. js 获取 html 页面代码中图片地址的实现代码
  4. Next.JS 页面渲染的优化方案
  5. 2020 前端性能优化清单 (三)& 谈谈 JS 的图片压缩
  6. p5.js 入门教程之图片加载
  7. JS 页面图片等元素在普通元素中滚动动态加载技术
  8. 原生 js 实现 Ajax
暂无,快来抢沙发吧！
更多





黑ICP备17005318号-1