夏日博客

A-A+

javaScript图片预加载后让图片像素变清晰

2016年01月21日 前端设计 暂无评论 阅读 6 views 次

图片预加载原理大概是图片的预加载:

1. 假设原图片是10001000的高清晰图片，譬如有4M。

2. 服务端除了原图，另外再准备一张该图片的缩小版，如：1010，大小只有400Byte。

3. 当客户端请求该图时，4M的原图肯定不会马上下好，特别是远程网络，这时先把小图下过来，并拉升到原图大小（这个操作应该是采用无插值算法的直接放大，速度是很快的。）

应该是存储了好几张不同尺寸不同分辨率的多张图片,当大图片没加载完之前先逐次显示小图片,最后把显示大图片,代码如下:

  1. <img id="myImage" src="small_1.jpg" width="200" />  
  2. var img = new Image();  
  3. img.src = "http://domain/big_800_600.jpg";  
  4. img.onload = function() {  
  5. document.getElementById('myImage').src = this.src;  
  6. }  

javascript图片预加载技术

lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相册的全屏效果),javascript无法获取img文件头数据,真的是这样吗？本文通过一个巧妙的方法让javascript获取它,这是大部分人使用预加载获取图片大小的例子.

当然实际中会有一些兼容陷阱，如width与height检测各个浏览器的不一致，还有webkit new Image()建立的图片会受以处在加载进程中同url图片影响，经过反复测试后的最佳处理方式,代码如下:

  1. // 更新：  
  2. // 05.27: 1、保证回调执行顺序：error > ready > load；2、回调函数this指向img本身  
  3. // 04-02: 1、增加图片完全加载后的回调 2、提高性能  
  4.    
  5. /** 
  6. * 图片头数据加载就绪事件 - 更快获取图片尺寸 
  7. * @version 2011.05.27 
  8. * @author TangBin 
  9. * @param {String} 图片路径 
  10. * @param {Function} 尺寸就绪 
  11. * @param {Function} 加载完毕 (可选) 
  12. * @param {Function} 加载错误 (可选) 
  13. * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () { 
  14. alert('size ready: width=' + this.width + '; height=' + this.height); 
  15. }); 
  16. */  
  17. var imgReady = (function () {  
  18. var list = [], intervalId = null,  
  19.    
  20. // 用来执行队列  
  21. tick = function () {  
  22. var i = 0;  
  23. for (; i < list.length; i++) {  
  24. list[i].end ? list.splice(i--, 1) : list[i]();  
  25. };  
  26. !list.length && stop();  
  27. },  
  28.    
  29. // 停止所有定时器队列  
  30. stop = function () {  
  31. clearInterval(intervalId);  
  32. intervalId = null;  
  33. };  
  34.    
  35. return function (url, ready, load, error) {  
  36. var onready, width, height, newWidth, newHeight,  
  37. img = new Image();  
  38.    
  39. img.src = url;  
  40.    
  41. // 如果图片被缓存，则直接返回缓存数据  
  42. if (img.complete) {  
  43. ready.call(img);  
  44. load && load.call(img);  
  45. return;  
  46. };  
  47.    
  48. width = img.width;  
  49. height = img.height;  
  50.    
  51. // 加载错误后的事件  
  52. img.onerror = function () {  
  53. error && error.call(img);  
  54. onready.end = true;  
  55. img = img.onload = img.onerror = null;  
  56. };  
  57.    
  58. // 图片尺寸就绪  
  59. onready = function () {  
  60. newWidth = img.width;  
  61. newHeight = img.height;  
  62. if (newWidth !== width || newHeight !== height ||  
  63. // 如果图片已经在其他地方加载可使用面积检测  
  64. newWidth * newHeight > 1024  
  65. ) {  
  66. ready.call(img);  
  67. onready.end = true;  
  68. };  
  69. };  
  70. onready();  
  71.    
  72. // 完全加载完毕的事件  
  73. img.onload = function () {  
  74. // onload在定时器时间差范围内可能比onready快  
  75. // 这里进行检查并保证onready优先执行  
  76. !onready.end && onready();  
  77.    
  78. load && load.call(img);  
  79.    
  80. // IE gif动画会循环执行onload，置空onload即可  
  81. img = img.onload = img.onerror = null;  
  82. };  
  83.    
  84. // 加入队列中定期执行  
  85. if (!onready.end) {  
  86. list.push(onready);  
  87. // 无论何时只允许出现一个定时器，减少浏览器性能损耗  
  88. if (intervalId === null) intervalId = setInterval(tick, 40);  
  89. };  
  90. };  
  91. })();  

调用例子,代码如下:

  1. imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {  
  2. alert('size ready: width=' + this.width + '; height=' + this.height);  
  3. });  
标签：

给我留言