懒加载的目的不是为了拦截图片的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
留下你的足迹求推荐呦