當我們要顯示後台傳過來若干個尺寸不一的圖片時，為了確保圖片大小的一致性及比例的協調，需要動態改變圖片顯示尺寸。透過搜索，我們可以從網路上找到實現此功能的jQuery程式碼如下。這段程式碼可以讓圖片的大小保持在一定範圍內，如果圖片的原始尺寸都大於max*值，則顯示出來的圖片寬度都相等。
原始碼:
$(document).ready(>
$(document).ready(function() { $('.post img').each(function() {
var maxWidth = 100; // 圖片最大寬度
var maxHeight = 100; // 圖片最大高度
var ratio = 0 ; // 縮放比例
var width = $(this).width(); // 圖片實際寬度
var height = $(this).height(); // 圖片> // 檢查圖片是否超寬
if(width > maxWidth){
idth", maxWidth); / / 設定實際顯示寬度
height = height * ratio; // 計算等比例縮放後的高度
高度
}
// 檢查圖片是否超高
if(height > maxHeightio){
if(height > maxHeightio c🎜> $(this). css("height", maxHeight); // 設定實際顯示高度
width = width * ratio; // 計算等比例縮放後的高度
ratio); // 設定等比例縮放後的高度
}
});
});
在我的js程式碼中，也採取了這種寫法。然而在不同的瀏覽器測試效果時，發現此種寫法無法適應chrome瀏覽器（chrome版本號為10.0.648.204），會產生圖片以原有尺寸顯示出來的bug。後來把$('.post img').each()的程式碼用$(window).load()方法包裝起來，就解決了chrome瀏覽器顯示不正確的問題。那麼在chrome瀏覽器為什麼會產生bug，並且$(document).ready和$(window).load有什麼差別呢？
原來document ready事件是在HTML文件載入即DOM準備好就開始執行了，即使圖片資源還沒載入進來。而window load事件執行的稍晚一些，它是在整個頁麵包含frames, objects和images都載入完成後才開始執行的。從這個差異可以分析出chrome瀏覽器在對於圖片不採用$(window).load()方法處理時，圖片載入與動態改變圖片的js程式碼執行順序不確定。
關於上面的程式碼,放到我的頁面中時獲取圖片高度時會報錯,提示沒有提供width方法
複製程式碼
程式碼如下:var width = $(this).width(); // 圖片實際寬度
var height = $(this).height(); // 圖片實際高度
故修改代碼如下:
