当前位置:首页 > 图片懒加载的原理

图片懒加载的原理

发布于 2019-11-05 阅读 393 次 Javascript

因为最近面试老遇到这个问题,所以在这里简单写一下代码,希望能帮到别人
这个懒加载很简单.其实就是利用一张默认图片,当然如果你觉得默认图片也占资源,你可以搞一个空div写几个文字代替也可以隐藏img标签,后期获取到数据之后,把img显示出来,这样就是多一个显示隐藏的dom操作,自己权衡吧。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style type="text/css">
  7. .eg{width:320px;background:#ccc;}
  8. .eg img{height:160px;margin-bottom: 10px;}
  9. </style>
  10. </head>
  11. <body>
  12. <div class="eg">
  13. <img width="100%" height="auto" src="default.jpg" data-src="http://image.w2le.com/2ca155ff30111fc5b765061a75b28b6a">
  14. <img width="100%" height="auto" src="default.jpg" data-src="http://image.w2le.com/0174fd1614aa44fde93f4abe2dedc3d2">
  15. <img width="100%" height="auto" src="default.jpg" data-src="http://image.w2le.com/77e88e62409229e146b2e7bcb55d6568">
  16. <img width="100%" height="auto" src="default.jpg" data-src="http://image.w2le.com/4f2ff8ccf87f17e77ddcc5a3c9d7aeec">
  17. </div>
  18. <script type="text/javascript">
  19. setTimeout(function(){
  20. var imgs = document.images,
  21. ln = imgs.length;
  22. for(let i=0;i<ln;i++){
  23. imgs[i].src = imgs[i].getAttribute('data-src');
  24. }
  25. },0)
  26. </script>
  27. </body>
  28. </html>