在Jquery中調整圖像大小保持加載

Question

我對Jquery很新，我遇到以下問題。

我寫了一個函數來調整圖像的大小，同時保持寬高比。我有更多的「如果」比這個版本需要更多的可讀性。 html結構就是這樣的。

<div class="post"> 
    <div class="date"></div> 
    <div class="thumbnail"> 
     <img class="img-thumb" /> 
    </div> 
    <div class="post-body"> 
     <p>...</p> 
     <img /> 
     <p>...</p> 
    </div>    
</div> 

尺寸調整（我也加入一些填充中心的形象。我覺得我沒有錯的那部分代碼。）

$(window).load(function() { 
    var parentWidth = 250;//max width. In the real script i get the parent width inside the each but for the example a static value is ok 
    var parentHeight = 196;//max height 

    $('.img-thumb').each(function() { 
     var img=$(this); 
     var width = img.width(); //image width 
     var height = img.height(); //image height 
      var aspect = width/height; 
      var wide = width/parentWidth; 
      var tall = height/parentHeight; 

     if(width > parentWidth) { 
       if (wide > tall) { 
        width = parseInt(parentWidth,10); 
        height = parseInt(parentHeight/aspect,10); 
       } 
      } 
      if(height > parentHeight) { 
       if (tall > wide) { 
        height = parseInt(parentHeight,10); 
        width = parseInt(parentWidth*aspect,10); 
       } 
      } 
      margin_top = parseInt((parentHeight - height)/2,10); 
      margin_left = parseInt((parentWidth - width)/2,10); 

      img.css({'margin-top' :margin_top + 'px', 
        'margin-left':margin_left + 'px', 
         'height'  :height + 'px', 
         'width'  :width + 'px' 
         }); 
    }); 
}); 

這裏是我的問題。我不明白負載是如何工作的。我的意思是。這將工作，但只有當所有的圖像加載。但它有兩個問題。第一個是它必須等待所有的加載，第二個是用戶將看到調整大小，所以我首先必須隱藏圖像並用show（）顯示它們。我可以在CSS中做到這一點，但當JavaScript被禁用，他們仍然會被隱藏，所以我更喜歡在jQuery中做到這一點。

我可以運行第二個。每個之前，並隱藏它們，但我想第二次運行一個同樣的事情不是最好的解決方案。那麼負載如何工作？

如果我這樣做，例如：

$('.img-thumb').each(function() { 

    var parentWidth = 250;//max width. In the real script i get the parent width inside the each but for the example a static value is ok 
    var parentHeight = 196;//max height 
    var img=$(this); 
    img.hide(); 
    img.load(function() { 
     var width = img.width(); //image width 
     var height = img.height(); //image height 
      var aspect = width/height; 
      var wide = width/parentWidth; 
      var tall = height/parentHeight; 

     if(width > parentWidth) { 
       if (wide > tall) { 
        width = parseInt(parentWidth,10); 
        height = parseInt(parentHeight/aspect,10); 
       } 
      } 
      if(height > parentHeight) { 
       if (tall > wide) { 
        height = parseInt(parentHeight,10); 
        width = parseInt(parentWidth*aspect,10); 
       } 
      } 
      margin_top = parseInt((parentHeight - height)/2,10); 
      margin_left = parseInt((parentWidth - width)/2,10); 

      img.css({'margin-top' :margin_top + 'px', 
        'margin-left':margin_left + 'px', 
         'height'  :height + 'px', 
         'width'  :width + 'px' 
         }).show(); 
    }); 
}); 

它不工作。我的意思是我仍然可以看到調整大小。我想原因是每個循環的第二部分在第一個圖像加載之前不會執行。那麼我如何告訴jquery執行加載代碼的outdise？我需要兩個。每個？

Answer 1

你的問題當您實際加載所有元素時，您綁定了加載事件 「$（window）.load（...）」

您想在您下載HTML dom時將加載事件綁定到圖像，但是您希望您的圖像能夠調整大小並在其後顯示被加載。因此，

取代「$（window）.load（...）」使用「$（document）.ready（...）」，然後給$（'。img-thumb'）加載事件as「$（'。img-thumb'）。load（..）」;你不需要使用每一個，因爲所有的圖像都有「img-thumb」類會有你負責調整大小操作的加載事件。

Answer 2

這是我的問題。我不明白負載是如何工作的。我的意思是。這將工作，但只有當所有的圖像加載

jQuery開始工作，當DOM完全加載，這就是爲什麼每個動作都會顯示給用戶。當你打電話給$(document).ready();時，你實際上是在告訴jQuery它應該等到頁面完成加載之後才執行所需的操作。

現在，爲了回答你的問題：

如果我理解正確的話，你有比你希望顯示在頁面上，你使用jQuery來給他們所需要的尺寸大小更大的圖片嗎？

1. 您可以使用CSS在頁面呈現時隱藏圖像。加載完成後，可以使用jQuery更改大小，然後再次使圖像可見。請參閱此示例：http://jsfiddle.net/CYfma/

2. 爲什麼要這樣做？這裏做的最好的事情（提前知道目標縮略圖大小）是存儲已調整大小的圖像。這是Facebook和許多其他網站用來節省帶寬的概念。渲染大圖像並在客戶端調整它們的大小並不會使它們的重量更小。這對你的頁面加載速度有很大的影響。

3. 如果您事先知道目標大小，也可以在CSS或HTML中使用圖像的寬度和高度屬性，使其成爲所需的大小。

編輯

在回答你關於禁用了JavaScript的關注，這是我的建議：

而不是使用CSS，你可以使用javascript（未jQuery的還）隱藏圖片。這意味着啓用javascript後，圖像將被隱藏，直到jQuery在中啓用。根據我的理解和觀察，在$(document).ready();內的代碼塊之前應該執行一行，如document.getElementById("image").style.display="none";。我曾嘗試這種解決方案，您可以點擊此處查看：http://jsfiddle.net/CYfma/1/

我希望我正確理解你的問題，如果沒有，我真誠道歉:-)

希望它可以幫助