当前第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如何获取图片宽高的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
node.js爬取豆瓣数据实例
javascript关于数组的方法有哪些不同之处?
js是什么编程语言?
javascript如何定义字符串
怎么判断是否加载了jquery?
使用new操作符实例化一个对象的具体步骤是什么
vue是做什么的
augularjs基础入门与实践
如何使用css设计出一个表单页面(附示例)
怎样用 tensorflow.js 创建基本的 ai 模型?
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » js如何获取图片宽高