start:
常常会做一些业务:根据图片的尺寸来适应弹窗的大小,更加图片的尺寸确定图片的表现方式,等等。。。
这里就需要先知道图片的尺寸大小来决定页面的布局,这里适应预加载的方式:
code:
1 function getImageSize(url) { 2 var image = new Image(); 3 var dd = $.Deferred(); 4 image.onload = function () { 5 var width = image.width; 6 var height = image.height; 7 dd.resolve({width,height:width}); 8 } 9 image.onerror = function () { 10 dd.reject('errorLoad') 11 } 12 image.src = url; 13 return dd; 14 }
上面的方法使用了jQuery deferred,在加载图片成功之后返回宽高,加载失败的时候返回错误信息,
使用起来也很方便
1 var src = "http://ss.bdimg.com/static/superman/img/logo/bd_logo1_31bdc765.png"; 2 $.when(getImageSize(src)).done(function (data) { 3 console.log(data); 4 })
tip:
需要先绑定好图片加载事件在为图片传入src,先传src再绑定的话,可能会某些特殊情况下已经加载了图片,却没响应事件
end:
这是一段三年前开发涂鸦板(http://tuya.100bt.com/)需求留下的一段代码,最近做某个需求需要用到,就留下笔记吧