当前第2页 返回上一页
为了测试缓存效果,注意以下测试图片的url都不加时间戳
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | var img_url = 'upload/2013/13643608813441.jpg' ;
var img = new Image();
img.src = img_url;
if (img.complete){
alert( 'from:complete : width:' +img.width+ ',height:' +img.height);
} else {
img.onload = function (){
alert( 'from:onload : width:' +img.width+ ',height:' +img.height);
};
}
|
第一次执行,永远是onload触发

你再刷新,几乎都是缓存触发了

从缓存里读取图片的宽高不用说,非常方便快捷,今天我们要解决的是没有缓存而又快速的相比onload更快的方式去获取图片的宽高。我们常常知道有些图片虽然没有完全down下来,但是已经先有占位符,然后一点一点的加载。既然有占位符那应该是请求图片资源服务器响应后返回的。可服务器什么时候响应并返回宽高的数据没有触发事件,比如onload事件。于是催生了第四种方法
四、通过定时循环检测获取
看看以下例子,为了避免从缓存里读取数据,每一次请求都带时间戳:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | var img_url = 'upload/2013/13643608813441.jpg?' + Date .parse( new Date ());
var img = new Image();
img.src = img_url;
var check = function (){
document.body.innerHTML += '
from:check : width: '+img.width+' ,height: '+img.height+'
';
};
var set = setInterval(check,40);
img.onload = function (){
document.body.innerHTML += '
from:onload : width: '+img.width+' ,height: '+img.height+'
';
clearInterval(set);
};
|
相关教程推荐:CSS视频教程
以上就是js如何获取图片宽高的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
javascript如何将字符串转换为数字
详细了解javascript中的延迟加载
如何理解html、css、javascript之间的关系?
javascript如何添加随机数
javascript是什么类型的语言
javascript数据类型的介绍
javascript怎么输出string数组
如何理解javascript中的函数概念
javascript引用类型的详细介绍(附示例)
javascript未知错误怎么查
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » js如何获取图片宽高