再谈JavaScript图片预加载技术

开发 前端
由于JavaScript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小,所以lightbox类效果为了让图片居中显示,导致其速度体验要比直接输出的差很多。而本文所提到的预加载技术主要是让JavaScript快速获取图片头部数据的尺寸。

51CTO推荐专题:JavaScript学习笔记 有问有答

一段典型的使用预加载获取图片大小的例子:

  1. var imgLoad = function (url, callback) {  
  2. var img = new Image();  
  3.  
  4. img.src = url;  
  5. if (img.complete) {  
  6. callback(img.width, img.height);  
  7. else {  
  8. img.onload = function () {  
  9. callback(img.width, img.height);  
  10. img.onload = null;  
  11. };  
  12. };  
  13.  
  14. }; 

可以看到使用onload的方式必须等待图片加载完毕,其速度不敢恭维。

web应用程序区别于桌面应用程序,响应速度才是最好的用户体验。如果想要速度与优雅兼得,那就必须提前获得图片尺寸,如何在图片没有加载完毕就能获取图片尺寸?

十多年的上网经验告诉我:浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕,并且这里大部分的图片都是没有预设width与height属性的,因为浏览器能够获取图片的头部数据。基于此,只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。

实现代码:

  1. var imgReady = function (url, callback, error) {  
  2. var width, height, intervalId, check, div,  
  3. img = new Image(),  
  4. body = document.body;  
  5.  
  6. img.src = url;  
  7.  
  8. // 从缓存中读取  
  9. if (img.complete) {  
  10. return callback(img.width, img.height);  
  11. };  
  12.  
  13. // 通过占位提前获取图片头部数据  
  14. if (body) {  
  15. div = document.createElement('div');  
  16. div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';  
  17. div.appendChild(img)  
  18. body.appendChild(div);  
  19. width = img.offsetWidth;  
  20. height = img.offsetHeight;  
  21.  
  22. check = function () {  
  23. if (img.offsetWidth !== width || img.offsetHeight !== height) {  
  24. clearInterval(intervalId);  
  25. callback(img.offsetWidth, img.clientHeight);  
  26. img.onload = null;  
  27. div.innerHTML = '';  
  28. div.parentNode.removeChild(div);  
  29. };  
  30. };  
  31.  
  32. intervalId = setInterval(check, 150);  
  33. };  
  34.  
  35. // 加载完毕后方式获取  
  36. img.onload = function () {  
  37. callback(img.width, img.height);  
  38. img.onload = img.onerror = null;  
  39. clearInterval(intervalId);  
  40. body && img.parentNode.removeChild(img);  
  41. };  
  42.  
  43. // 图片加载错误  
  44. img.onerror = function () {  
  45. error && error();  
  46. clearInterval(intervalId);  
  47. body && img.parentNode.removeChild(img);  
  48. };  
  49.  
  50. }; 

是不是很简单?这样的方式获取摄影级别照片尺寸的速度往往是onload方式的几十多倍,而对于web普通(800×600内)浏览级别的图片能达到秒杀效果。

好了,请观赏令人愉悦的 DEMO ,通过测试的浏览器:Chrome、Firefox、Safari、Opera、IE6、IE7、IE8。
 

原文链接:http://www.planeart.cn/?p=1121

【编辑推荐】

  1. 示例:JavaScript中的后续传递风格
  2. JavaScript中同名标识符优先级详解
  3. 浅析JavaScript继承方式
  4. 如何编写高质量的JavaScript代码
  5. 通过JavaScript或PHP检测Android设备
责任编辑:陈贻新 来源: 唐斌的博客
相关推荐

2022-01-04 16:50:47

JavaScript图片网站

2021-08-04 09:51:02

代理设计模式

2011-07-22 13:30:52

JavaScript

2012-02-27 09:30:22

JavaScript

2012-06-05 10:22:45

jQuery

2011-01-17 19:35:04

javascriptjqueryweb

2009-11-04 11:51:08

技术领袖

2014-11-05 10:31:28

2011-07-29 10:12:12

JavaScript

2020-10-31 16:43:58

6G5GAI

2023-04-18 23:44:54

性能优化开发preload

2015-03-10 13:55:31

JavaScript预解析原理及实现

2010-03-29 14:09:34

2009-03-15 10:09:56

IE8浏览器进程模型

2023-06-06 15:31:13

JavaScript开发

2015-06-11 10:12:26

Android图片加载缓存

2021-05-08 09:49:07

JavaScript延迟加载

2013-07-15 16:39:41

iOS多线程GCD实战串行队列实现预加载

2011-07-06 16:15:46

iPhone 图片

2013-06-27 11:16:27

Android异步加载
点赞
收藏

51CTO技术栈公众号