html5提供了獲取圖片原始寬高的方法：img.naturalWidth／img.naturalHeight
現(xiàn)在阁簸，我想要輪播展示一組圖片：
當(dāng)圖片寬／高>1（展示框比例）時(shí)（即扁扁的圖片）欢策，讓圖片的寬達(dá)到展示框的100%，而高度適應(yīng)原圖片比例推姻，圖片在展示框中左右頂邊，上下居中框沟。
當(dāng)圖片寬／高<=1時(shí)（即瘦瘦的圖片）藏古，讓圖片的高達(dá)到展示框的100%增炭，而寬度適應(yīng)原圖片比例，圖片在展示框中上下頂邊拧晕，左右居中隙姿。
那么，需要獲得各個(gè)圖片的寬高厂捞，以及它們的比例输玷；根據(jù)比例是否大于1；對(duì)應(yīng)添加類Fill-x／Fill-y對(duì)應(yīng)不同的樣式靡馁。
一開始欲鹏，獲取寬高的我是直接這樣寫的：
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);
}
但是運(yùn)行時(shí)卻發(fā)現(xiàn)，獲取到的寬高始終都是0臭墨。
上網(wǎng)查了一下資料赔嚎，發(fā)現(xiàn)是因?yàn)樵趫D片的相關(guān)數(shù)據(jù)沒有被加載前，它的默認(rèn)高度就是0胧弛。
這個(gè)時(shí)候想到的解決方法是：可以使用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)
})
但是在運(yùn)行時(shí)依然存在問題，跑出來的寬高有時(shí)是正確的结缚，有時(shí)卻是0损晤，這個(gè)時(shí)候是因?yàn)闆]有考慮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)
})
