html5提供了获取图片原始宽高的方法：img.naturalWidth／img.naturalHeight
现在，我想要轮播展示一组图片：
当图片宽／高>1（展示框比例）时（即扁扁的图片），让图片的宽达到展示框的100%，而高度适应原图片比例，图片在展示框中左右顶边，上下居中。
当图片宽／高<=1时（即瘦瘦的图片），让图片的高达到展示框的100%，而宽度适应原图片比例，图片在展示框中上下顶边，左右居中。
那么，需要获得各个图片的宽高，以及它们的比例；根据比例是否大于1；对应添加类Fill-x／Fill-y对应不同的样式。
一开始，获取宽高的我是直接这样写的：
imageList.forEach(function(item) {
img = item.children[0];
var imgW = img.naturalWidth;
var imgH = img.naturalHeight;
var imgR = imgW / imgH;
console.log("width:" + imgW);
console.log("height:" + imgH);
console.log(imgR);
var resultMode = imgR > 1 ? ‘Fill-x' : 'Fill-y';
$(img).addClass(resultMode);
}
但是运行时却发现，获取到的宽高始终都是0。
上网查了一下资料，发现是因为在图片的相关数据没有被加载前，它的默认高度就是0。
这个时候想到的解决方法是：可以使用setTimeout，通过延迟来保证图片加载完成：
function imageLoad(img) {
img.onload = function() {
var imgW = img.naturalWidth;
var imgH = img.naturalHeight;
var imgR = imgW / imgH;
console.log("width:" + imgW);
console.log("height:" + imgH);
console.log(imgR);
var resultMode = imgR > 1 ? 'Fill-x' : 'Fill-y';
$(img).addClass(resultMode);
}
}
}
list.forEach(function(item) {
img = item.children[0];
setTimeout(imageLoad(img), 500)
})
但是在运行时依然存在问题，跑出来的宽高有时是正确的，有时却是0，这个时候是因为没有考虑img.complete的情况，故最终代码为：（不过需要注意ie没有foreach方法）
function imageLoad(img) {
if(img.complete){
var imgW = img.naturalWidth;
var imgH = img.naturalHeight;
var imgR = imgW / imgH;
console.log("complete:width:" + imgW);
console.log("height:" + imgH);
console.log(imgR);
var resultMode = imgR > 1 ? 'Fill-x' : 'Fill-y';
$(img).addClass(resultMode);
}
img.onload = function() {
var imgW = img.naturalWidth;
var imgH = img.naturalHeight;
var imgR = imgW / imgH;
console.log("width:" + imgW);
console.log("height:" + imgH);
console.log(imgR);
var resultMode = imgR > 1 ? 'Fill-x' : 'Fill-y';
$(img).addClass(resultMode);
}
}
}
imageList.forEach(function(item) {
img = item.children[0];
setTimeout(imageLoad(img), 500)
})
