最实用的图片懒加载精解

移动开发
图片延迟加载也称为懒加载,延迟加载图片或符合某些条件时才加载某些图片,通常用于图片比较多的网页。可以减少请求数或者延迟请求数,优化性能。

定义

图片延迟加载也称为懒加载,延迟加载图片或符合某些条件时才加载某些图片,通常用于图片比较多的网页。可以减少请求数或者延迟请求数,优化性能。
呈现形式
【1】延时加载,使用setTimeout或setInterval进行加载延迟,如果用户在加载前就离开,自然就不会进行加载。
【2】条件加载,符合某些条件或者触发了某些条件才开始异步加载。
【3】可视区域加载,仅仅加载用户可以看到的区域,这个主要监控滚动条来实现,一般距离用户看到的底边很近的时候开始加载,这样能保证用户下拉时图片正好接上,不会有矿长时间的停顿。
基本步骤

【1】网页中的图片都设为同一张图片
【2】给图片增加data-original = "img/test.jpg"的属性,保存图片的真实地址
【3】当触发某些条件时,自动改变该区域的图片的src属性为真实的地
应用

【点击按钮显示图片】

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>Document</title> 
  6. <style> 
  7. body{ 
  8. margin: 0; 
  9. img{ 
  10. height: 100px; 
  11. width: 100px; 
  12. </style> 
  13. </head> 
  14. <body> 
  15. <button>加载图片</button> 
  16. <img src="#" alt="测试" data-original = "img/test.png"> 
  17. <script> 
  18. var oBtn = document.getElementsByTagName('button')[0]; 
  19. var oImg = document.images[0]; 
  20. oBtn.onclick = function(){ 
  21. oImg.src = "img/loading.gif"
  22. if(oImg.dataset){ 
  23. aftLoadImg(oImg,oImg.dataset.original); 
  24. }else{ 
  25. aftLoadImg(oImg,oImg.getAttribute("data-original")); 
  26. function aftLoadImg(obj,url){ 
  27. var oImg = new Image(); 
  28. oImg.onload = function(){ 
  29. obj.src = oImg.src; 
  30. oImg.src = url
  31. </script> 
  32. </body> 
  33. </html>

【可视区显示图片】

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4. <meta charset="UTF-8"
  5. <title>Document</title> 
  6. <style> 
  7. body{ 
  8. margin: 0
  9. ul{ 
  10. margin: 0
  11. padding: 0
  12. list-style: none; 
  13. img{ 
  14. border: none; 
  15. vertical-align: middle; 
  16. .in{ 
  17. border: 1px solid black; 
  18. margin: 10px; 
  19. text-align: center; 
  20. height: 400px; 
  21. width: 400px; 
  22. float: left; 
  23. .in img{ 
  24. height: 400px; 
  25. width: 400px; 
  26. </style> 
  27. </head> 
  28. <body> 
  29. <ul class="list"
  30. <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li> 
  31. <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li> 
  32. <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li> 
  33. <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li> 
  34. <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li> 
  35. <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li> 
  36. <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li> 
  37. <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li> 
  38. </ul> 
  39.  
  40. <script> 
  41. var oBtn = document.getElementsByTagName('button')[0]; 
  42. var aImages = document.images; 
  43. loadImg(aImages); 
  44. window.onscroll = function(){ 
  45. loadImg(aImages); 
  46. }; 
  47. function loadImg(arr){ 
  48. for( var i = 0,len = arr.length; i < len; i++){ 
  49. if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){ 
  50. arr[i].isLoad = true
  51. arr[i].style.cssText = "transition: ''; opacity: 0;" 
  52. if(arr[i].dataset){ 
  53. aftLoadImg(arr[i],arr[i].dataset.original); 
  54. }else
  55. aftLoadImg(arr[i],arr[i].getAttribute("data-original")); 
  56. (function(i){ 
  57. setTimeout(function(){ 
  58. arr[i].style.cssText = "transition: 1s; opacity: 1;" 
  59. },16
  60. })(i); 
  61. function aftLoadImg(obj,url){ 
  62. var oImg = new Image(); 
  63. oImg.onload = function(){ 
  64. obj.src = oImg.src; 
  65. oImg.src = url; 
  66.  
  67. </script> 
  68. </body> 
  69. </html> 

 

责任编辑:chenqingxiang 来源: 博客园
相关推荐

2020-11-18 09:30:29

图片懒加载前端浏览器

2021-03-19 06:31:06

vue-lazyloa图片懒加载项目

2018-08-02 14:08:47

小程序javascriptlazyload

2019-09-09 09:05:59

图片框架懒加载

2024-04-23 09:35:27

线程终止C#多线程编程

2010-03-09 13:54:05

Linux find命

2011-11-21 12:56:10

Java代理模式设计模式

2021-08-16 12:32:37

HashMap八股文面试

2017-03-28 10:11:12

Webpack 2React加载

2024-03-20 09:31:00

图片懒加载性能优化React

2011-01-17 19:35:04

javascriptjqueryweb

2019-12-10 08:59:55

JVM内存算法

2022-06-07 08:18:49

懒加载Web前端

2009-07-03 16:45:25

JSP实用教程

2015-10-29 10:50:46

Android架构设计原则

2010-08-12 14:20:41

CISCO常见问题

2024-01-08 08:50:19

Vue3级联菜单数据懒加载

2009-02-20 09:13:57

宽带路由器产品

2020-03-31 18:47:22

机器学习ML应用程序

2015-08-03 10:50:48

高能预警虚拟化运维
点赞
收藏

51CTO技术栈公众号