当前第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中鲜为人知的隐藏语法或技巧
js常用正则表达式总汇
详解js中值传递和引用传递的区别
js 什么意思
javascript数组什么意思
servlet中定义的变量如何传给javascript函数
javascript怎么移除数组元素
可以同时删除字符串前导和尾部空白的函数是什么
10个实用的es6方法,快来收藏!
javascript的fcous什么意思
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » js如何获取图片宽高