图片懒加载

懒加载的目的不是为了拦截图片的src,而是防止图片未加载完成时出现的空白。
所以强行将data-src换成src去加载页面对于没有src属性的标签可以实现(按背景图处理),但对于含有src属性的标签是不可行的(如:img)。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>图片懒加载</title>
 6 </head>
 7 <style>
 8     img{
 9         display: block;
10         border: 1px solid red;
11     }
12     div{
13         transition: 1s;
14         width:600px;
15         height:400px;
16         background-size: cover; 
17         background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=');
18         border: 1px solid red;
19         text-align: center;
20     }
21 </style>
22 <body>
23     
24     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图1</div>
25     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图2</div>
26     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图3</div>
27     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图4</div>
28     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图5</div>
29     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图6</div>
30     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图7</div>
31     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图8</div>
32     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图9</div>
33     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图10</div>
34     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图11</div>
35     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图12</div>
36     <hr>
37     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=图" width="600" height="400" />
38     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=片" width="600" height="400" />
39     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=图片" width="600" height="400" />
40     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=呵呵" width="600" height="400" />
41     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=啊啊" width="600" height="400" />
42     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=作者" width="600" height="400" />
43     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=摆手" width="600" height="400" />
44     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=微笑" width="600" height="400" />
45     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=图" width="600" height="400" />
46     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=杀杀杀" width="600" height="400" />
47     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=看看看" width="600" height="400" />
48     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000" width="600" height="400" />
49 
50     <script src="lazyload.js"></script>
51     <script>
52         // 默认class是lazyload
53         let images = document.querySelectorAll(".lazy");
54         
55         window.addEventListener("load", function(event) {
56             // let timeout = setTimeout(function() { // 延迟5秒加载
57             //     lazyload();
58             // }, 5000);
59             lazyload(images);
60         });
61     </script>
62 </body>
63 </html>

插件地址:https://github.com/tuupola/jquery_lazyload/tree/2.x

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js调用摄像头

    ProsperLee
  • Session过期,跳出iframe框架页显示会话过期页面

    web开发中经常会有这种情况,在一个主页面中包含侧边导航菜单和iframe,点击菜单项,对应页面会在iframe中显示,整个页面不会刷新。但是如果设置了会话Se...

    ProsperLee
  • 本地存储之cookie

    ProsperLee
  • boostrap4浅谈之js插件(二)

    在boostrap4入门之js插件的第一部分中,我们已经了解了下拉菜单,手风琴,选项卡,响应式导航栏等插件,在这一篇,我们主要是了解以下几个插件,具体示例如下:

    邂逅千寻
  • ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件

    序言 Bootstrap的JavaScript插件是以JQuery为基础,提供了全新的功能并且还可以扩展现有的Bootstrap组件。通过添加data att...

    用户1161731
  • HTML炫酷PJAX引导单页

    官方演示: https://dwq.im 本地演示版本: https://www.weidro.cn 来源: https://dwq.im

    AlexTao
  • 电子规范管理系统(2)

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

    hotqin888
  • day35_Spring学习回顾_03

    黑泽君
  • JVM系列第13讲:JVM参数之追踪类信息

    我们都知道 JVM 在启动的时候会去加载类信息,那么我们怎么得知他加载了哪些类,又卸载了哪些类呢?我们这一节就来介绍四个 JVM 参数,使用它们我们就可以清晰地...

    陈树义
  • Python爬虫:Scrapy 框架快速入门及实战演练

    今天来介绍一下 Python 的一个爬虫框架Scrapy ,类似的还有 Portia Crawley。

    wsuo

扫码关注云+社区

领取腾讯云代金券