上一篇
吉利慈鲷观察日志
图文并茂的网页,图指的是图片。图片以外部资源出现在网页上,曾几何时你会发现图片不像文字,瞬间能加载进来。在没有指定图片大小时,首次加载的图片由小到大的或模糊到清晰加载进来。
图片未完成加载进来前,图片大小皆获取失败。第二次刷新页面,浏览器缓存加载过的图片,无须等待,即可获取图片大小,以致于你误判成功获图片大小。
JSvar image = new Image();
image.src = 'https://www.didaolan.cn/dist/images/logo.svg';
if(image.complete == true) {
console.log('图片已加载完成')
}
一般情况下,图片加载是一个传输的过程,需要时间去完成,通常直接使用complete显示的结果是false,需要额外添加个定时器监听其状态。
使用定时器监听总感觉不利所,这里你需要了解下onload方法:图片加载完后,触发该事件。可以准确获取图片的大小。
JSvar image = new Image();
image.src = 'https://www.didaolan.cn/dist/images/logo.svg';
image.onload = function() {
var width = image.width;
var height = image.height;
console.log('图片长:'+width);
console.log('图片宽:'+height)
}
※ Chrome浏览器按F12,Network选项框勾上Disable cache,不缓存外部资源。
最新评论Latest comments