- 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>