一个菜鸟的互联网技术分享博客
您的位置: 主页 > HTML页面中的images懒加载
advertisement

HTML页面中的images懒加载

一个实习生最近问我在写一个产品页面列表页的时候该页面加载比较慢,想用懒加载,但是又不熟练,这下好了,摸了一下我的光头就开始写了一点了。

一、什么是图片懒加载?

当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),当图片出现在浏览器的可视区域内时,才设置图片真正的路径,让图片显示出来。这就是图片懒加载。
通俗一点:
1、就是创建一个自定义属性data-src存放真正需要显示的图片路径,而img自带的src放一张大小为1 * 1px的图片路径。
2、当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-src的值赋给src。
ps:自定义属性可以取任何名字

二、需要了解的问题
1、如何加载图片?
2、如何判断一个元素出现在视野中?

如何加载图片?
只需要把data-src中的地址放到src的里面就好了。
代码:
  1. function loadImg($img){  
  2.     //.attr(值)  
  3.     //.attr(属性名称,值)  
  4.     $img.attr('src', $img.attr('data-src')) //把data-src的值 赋值给src  
  5.     $img.attr('data-isLoaded', 1//已加载过的图片做标记  
  6. }  

废话少说,直接上demo:

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4.     <head>  
  5.         <meta charset="UTF-8">  
  6.         <title>Document</title>  
  7.         <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>  
  8.         <style>  
  9.             .container {  
  10.                 max-width: 900px;  
  11.                 margin: 0 auto;  
  12.                 display: block;  
  13.             }  
  14.   
  15.             .container:after {  
  16.                 content: '';  
  17.                 display: block;  
  18.                 clear: both;  
  19.             }  
  20.   
  21.             h1 {  
  22.                 clear: both;  
  23.             }  
  24.         </style>  
  25.     </head>  
  26.   
  27.     <body>  
  28.         <div class="container">  
  29.             <img src="img/loading.gif" alt="1" data-src="img/g1.jpg">  
  30.             <img src="img/loading.gif" alt="2" data-src="img/g2.jpg">  
  31.             <img src="img/loading.gif" alt="3" data-src="img/g3.jpg">  
  32.             <h1>你好</h1>  
  33.         </div>  
  34.         <script>  
  35.             start();  
  36.             $(window).on('scroll', function() {  
  37.                 start();  
  38.             })  
  39.   
  40.             function start() {  
  41.                 //.not('[data-isLoaded]')选中已加载的图片不需要重新加载  
  42.                 $('.container img').not('[data-isLoaded]').each(function() {  
  43.                     var $node = $(this);  
  44.                     if (isShow($node)) {  
  45.                         loadImg($node);  
  46.                     }  
  47.                 })  
  48.             }  
  49.   
  50.             //判断一个元素是不是出现在窗口(视野)  
  51.             function isShow($node) {  
  52.                 return $node.offset().top <= $(window).height() + $(window).scrollTop();  
  53.             }  
  54.             //加载图片  
  55.             function loadImg($img) {  
  56.                 //.attr(值)  
  57.                 //.attr(属性名称,值)  
  58.                 $img.attr('src', $img.attr('data-src')); //把data-src的值 赋值给src  
  59.                 $img.attr('data-isLoaded', 1); //已加载的图片做标记  
  60.             }  
  61.         </script>  
  62.     </body>  
  63.   
  64. </html>  

说明一下:
当我们打这个demo的时候,看到的是第一张图片,这个在打开第一张图片的时候,利用开发者工具我们可以看到如下截图:


这个就说明当视口显示第一张图片的时候,第二张和第三张还没出现,那么就保持loading.gif,这样就节省了加载的时间,当我们继续往下滑直到出现第二张图片的时候,此时第三张图片还没出现在视口,我们通过开发者工具看到如下的截图:
 

当然,我们继续滑动到下面,看到第三张图片的时候,自然而然第三张的loading.gif也会被g3.jpg取代,这样就实现了懒加载,滑动到那个位置才加载,可以参考这个博主写的:
https://www.cnblogs.com/moxiaowohuwei/p/7908877.html
zhangren.online
上一篇:一个html实现的小时钟,动态显示当前时间,可以直接运行使用
下一篇:项目中使用逼格较高的富文本编辑器(tinymce)心得

您可能喜欢

​es6常用数组操作及技巧汇总

​es6常用数组操作及技巧汇总

​javaascript之数字倒计时

​javaascript之数字倒计时

​原生JS实现鼠标悬停tab切换

​原生JS实现鼠标悬停tab切换

回到顶部