图片懒加载

ProsperLee

发布于 2018-10-24 10:37:46

2K0

发布于 2018-10-24 10:37:46

懒加载的目的不是为了拦截图片的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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-09-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html