经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JSJS库框架 » JavaScript » 查看文章
图片懒加载
来源:cnblogs  作者:ProsperLee  时间:2018/9/27 16:42:45  对本文有异议
  1. 1 <!DOCTYPE html>
  2. 2 <html lang="en">
  3. 3 <head>
  4. 4 <meta charset="UTF-8">
  5. 5 <title>图片懒加载</title>
  6. 6 </head>
  7. 7 <style>
  8. 8 img{
  9. 9 display: block;
  10. 10 border: 1px solid red;
  11. 11 }
  12. 12 div{
  13. 13 transition: 1s;
  14. 14 width:600px;
  15. 15 height:400px;
  16. 16 background-size: cover;
  17. 17 background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=');
  18. 18 border: 1px solid red;
  19. 19 text-align: center;
  20. 20 }
  21. 21 </style>
  22. 22 <body>
  23. 23
  24. 24 <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图1</div>
  25. 25 <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图2</div>
  26. 26 <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图3</div>
  27. 27 <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图4</div>
  28. 28 <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图5</div>
  29. 29 <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图6</div>
  30. 30 <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图7</div>
  31. 31 <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图8</div>
  32. 32 <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图9</div>
  33. 33 <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图10</div>
  34. 34 <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图11</div>
  35. 35 <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图12</div>
  36. 36 <hr>
  37. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 48 <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000" width="600" height="400" />
  49. 49
  50. 50 <script src="lazyload.js"></script>
  51. 51 <script>
  52. 52 // 默认class是lazyload
  53. 53 let images = document.querySelectorAll(".lazy");
  54. 54
  55. 55 window.addEventListener("load", function(event) {
  56. 56 // let timeout = setTimeout(function() { // 延迟5秒加载
  57. 57 // lazyload();
  58. 58 // }, 5000);
  59. 59 lazyload(images);
  60. 60 });
  61. 61 </script>
  62. 62 </body>
  63. 63 </html>

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号