jQuery調整文檔中所有圖像的大小準備

我有一個圖像的頁面，我希望它們全部通過使用jQuery準備文檔的大小（通過獲取某些CSS類）來調整大小。圖像有一個初始的「.test」，它在CSS文件中沒有屬性。我知道如何給他們新的課程，以便他們可以調整大小。但是，我想根據寬度或高度來調整大小，以使它們看起來都一樣。jQuery調整文檔中所有圖像的大小準備

我的問題是，我不能得到他們的寬度/高度繼續。我的代碼是這樣的：

我在if語句之前發出的警報總是返回0 - 雖然它確實出現了正確的次數。

我也試圖與$(this).width;和$(this).offsetHeight;和$(this).attr('width');但是當結果不爲0，這是undefined得到寬度（以及高度）。

我在做什麼錯？

來源

2012-03-19 Dimitris Damilos

它的工作，我創建了一個小提琴http://jsfiddle.net/tLmPX/進行測試。除非類名測試的元素不是img標籤，它應該工作 – kalyang 2012-03-19 13:21:51

使用

$(window).load(function() {

，而不是

$(document).ready(function(){

負載事件被觸發時，所有圖像都實際加載晚了一點。

使用jQuery的.load（）方法來負載事件處理程序附加到窗口或更具體的項，如圖像。

來源：http://api.jquery.com/ready/

來源

2012-03-19 13:18:11

這是正確的！非常感謝你！但我有一個問題。當我試圖讓它$'（window）.load（function（）{$（'。test'）。each（function（）{... etc'它工作得很好，我試了'$（document ）.ready（function（）{$（'。test'）。load（function（）{...'它只適用於某些圖像。你知道爲什麼會發生這種情況嗎？ – 2012-03-20 17:45:53

@Jonur：看一看訪問http://api.jquery.com/load-event/並查找「與圖片一起使用時加載事件的警告」。在這裏您將看到一個加載的缺陷列表，可能有一些圖片是在緩存中。 – 2012-03-20 19:18:22

前段時間我也遇到過這個問題。問題是圖像尚未完全加載。

但是，我建議不要這樣做。加載一個大的圖片，然後調整其客戶端不是一個好方法。您應該考慮在服務器端重新調整大小，以便用戶不必下載大型圖像以免使用。

你應該看看phpThumb，它是一個很棒的PHP類，可以爲你調整圖像大小並緩存圖像。這是一個很好的工具，也是實現這一目標的更好方法。

來源

2012-03-19 13:17:24 OptimusCrime

我會研究它，ty爲答覆！ :) – 2012-03-19 13:46:01

$(document).ready(function(){ 

    $('.test').load(function(){ 
     var img_width = $(this).width(); 
     var img_height = $(this).height(); 
     alert("My width:" + img_width + "px, My Height: " + img_height + "px"); 

     if (img_width > img_height) 
     { 
      //resize to height 
     }else{ 
      //resize to width 
     } 
    }); 
})

來源

2012-03-19 13:19:46

謝謝 - 將它改爲.load工作！:) – 2012-03-19 13:46:28

您還可以檢查出SLIR：https://github.com/lencioni/SLIR

來源

2012-03-19 13:21:00