JavaScript如何動態改變圖片顯示大小的範例程式碼

    當我們要顯示後台傳過來若干個尺寸不一的圖片時，為了確保圖片大小的一致性及比例的協調，需要動態改變圖片顯示尺寸。透過搜索，我們可以從網路上找到實現此功能的jQuery程式碼如下。這段程式碼可以讓圖片的大小保持在一定範圍內，如果圖片的原始尺寸都大於max*值，則顯示出來的圖片寬度都相等。

$(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){
         ratio = maxWidth / width; // 计算缩放比例
         $(this).css("width", maxWidth); // 设定实际显示宽度
         height = height * ratio; // 计算等比例缩放后的高度 
         $(this).css("height", height); // 设定等比例缩放后的高度
     }
   
     // 检查图片是否超高
     if(height > maxHeight){
         ratio = maxHeight / height; // 计算缩放比例
         $(this).css("height", maxHeight); // 设定实际显示高度
         width = width * ratio; // 计算等比例缩放后的高度
         $(this).css("width", width * ratio); // 设定等比例缩放后的高度
     }
 });
 });

  在不同的瀏覽器測試效果時，發現此種寫法無法適應chrome瀏覽器，會產生圖片以原有尺寸顯示出來的bug。原來document ready事件是在HTML文件載入即DOM準備好就開始執行了，即使圖片資源還沒載入進來。網路上有一種說法是用$(window).load()方法包裝起來，就能解決chrome瀏覽器顯示不正確的問題-----window load事件執行的稍晚一些，它是在整個頁麵包括frames , objects和images都載入完成後才開始執行的。從這個差異可以分析出chrome瀏覽器在對於圖片不採用$(window).load()方法處理時，圖片載入與動態改變圖片的js程式碼執行順序不確定。

最近在做的室內圖模組，需要先從後台載入室內圖圖片顯示到頁面上，為了確保圖片大小的一致性及比例的協調，需要動態改變圖片顯示尺寸，然後在調整大小的室內圖上顯示對應的ap位置。這裡分三步：
  1.發送ajax請求，拿到需要載入的室內圖的url，更新dom，顯示室內圖
  2.動態改變圖片顯示尺寸
  3.在室內圖上顯示對應的ap位置座標
  開始我是這樣做的：
  發送ajax請求，在返回success函數裡動態改變圖片顯示尺寸並發送ajax請求在室內圖上顯示對應的ap位置座標，最後的結果是圖片是以原有尺寸顯示出來的，我調整後的方法是：
  發送ajax請求，在返回success函數裡

var img= new Image();
    img.src = url;
    img.onload = function(){
    // 需要执行的程序
         动态改变图片实现尺寸并发送ajax请求在室内图上显示对应的ap位置坐标
    }

    結果圖片就是動態改變尺寸後顯示出來的

以上是JavaScript如何動態改變圖片顯示大小的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！