Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

在图片onload前获取图片的大小

  从服务器加载图片,如果要等图片加载完后才获取到大小那就麻烦了。能不能在图片加载完成之前就获取到它的大小呢?当然可以,图片文件的大小是保存在图片的文件头中的,后面的是数据部分。我们用16进制工具打开一张图片就很容易看出。

  我选中的部分就是图片的大小信息,只要一个图的头部被加载完成,就可以获取到它的大小。我们来做一个实验,写一个服务器程序,先输出一个图片的头部,等待一秒以后再输出图片的全部。下面是PHP代码 //MyPicture.php
//先输出一个图片的HTTP头
header('Content-type: image/png');
//从文件中加载图片数据
$data=file_get_contents('signet.png');
//设置一个分段大小
$mid=0x30;
//输出文件的前$mid字节
echo substr($data,0,$mid);
//把输出的数据发送到客户端
flush();
//等待1秒
sleep(1);
//从$mid位置开始输出图片的剩余数据
echo substr($data,$mid);
  这个MyPicture.php就是我们的图片地址了,直接访问它会先卡住一秒然后刷出图片。

  接着我们要写客户端JavaScript代码向服务器请求这张图片,趁服务器在sleep的时候偷偷的把图片大小取到。 //创建一个图片对象
var img=new Image;
//图片加载完成事件
img.onload=function(){
  console.log("onload",img.width,img.height);
};
//发送请求
//URL上加随机数避免缓存影响结果
img.src="MyPicture.php?"+Math.random();
//设置0.5秒以后输出图片大小
//我猜0.5秒这点时间足够图片头部加载完成了
setTimeout(function(){
  console.log("setTimeout",img.width,img.height);
},500);

  看呐,setTimeout执行的时候我们就已经获取到图片大小了。这就可以证明一张图片只需要加载3*16字节或者更少就可以得到图片大小了。如果你想在项目中使用这个手法当然可以,但是像上面的代码那样写了。本地测试的时候这样写还行,真正使用的时候因为有些用户的网络环境很奇葩,我们完全无法估计0.5秒能不能加载到图片的头部,所以建议使用setInterval或递归setTimeout去取,取到或者错误了再结束。
网名:
54.198.108.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^