jQuery動態改變圖片顯示大小(修改版)的實作想法及程式碼_jquery

當我們要顯示後台傳過來若干個尺寸不一的圖片時，為了確保圖片大小的一致性及比例的協調，需要動態改變圖片顯示尺寸。透過搜索，我們可以從網路上找到實現此功能的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();  // 圖片實際高度

故修改代碼如下:

複製程式碼 程式碼如下:

jQuery(window).load(function () {
            jQuery("div.product_info img"). this, 680, 1000);
            });
        });
       var image = new Image();
            image.src = ImgD.src;
       image.width > 0 && image.height > 0) {
               if (image.width / image.height      if (image.width > FitWidth) {
                     寬度= FitWidth;
                      ImgD.height = (image.height   } else {
                        ImgD.width =       ImgD.height = image.height ;
                   }
              if (image.height > FitHeight) {
                            ImgD.width = (image.width * FitHeight) / image. height;
                   } else {
                               ImgD.height = image.height;
              }
            }
        }