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