get image WIDTH和HEIGHT併爲任何圖像寫屬性

我使用的是jScrollPane，並且我在Chrome和Safari中有一些與可滾動區域高度有關的問題。get image WIDTH和HEIGHT併爲任何圖像寫屬性

要使jScrollPane工作，我必須爲可滾動區域內的任何圖像設置HEIGHT和WIDTH。

.css沒有問題，但如果一個圖像是Ex：在縱向模式下會怎麼樣？爲了避免手動設置寬度和高度，我意識到... jQuery！ :)

現在我有這樣的事情：

imageWidth = $('.scroll_pane img').width(); 
imageHeight = $('.scroll_pane img').height(); 
$('.scroll_pane img').css({'width': imageWidth, 'height': imageHeight});

也就是說一半正確的（我想）如今跟：

<img src="some/url/image.jpg"/>

在DOM準備好我得到這個：

<img src="some/url/image.jpg" style="width: 120px; height: 220px"/>

第一張圖片。問題是現在所有其他圖像都具有相同的樣式。

如何使每個圖像寫入自己自己的風格？

編輯：（及膠囊對未來的建議）

解決方案，THX到Cybernate：

$(window).load(function() { 
    $('.scroll_pane').jScrollPane(); 

    $('.scroll_pane img').each(function(){  
     var $this = $(this); 
     var imageWidth = $this.width(); 
     var imageHeight = $this.height();   
     $this.css({'width': imageWidth, 'height': imageHeight}); 
    }); 
});

現在計算正確的影像風格，最後JScrollPane的工作在Safari和Opera！

來源

2011-04-04 Roko C. Buljan

爲了使它更加健壯，您應該在調用jScrollPane之前計算寬度/高度。 – Capsule 2011-04-04 22:35:23

使用每個功能，然後將各個元素進行操作。例如：

$('.scroll_pane img').each(function(){ 
    var $this = $(this); 
    var imageWidth = $this.width(); 
    var imageHeight = $this.height();  
    $this.css({'width': imageWidth, 'height': imageHeight}); 
});

來源

2011-04-04 21:48:15 Chandu

這是完全有效的，但在這種情況下完全沒用：您試圖解決與圖像大小相關的問題未知的那一刻，你正在試圖解決它;-)如果圖像已經加載，你不必手動分配他們的尺寸，jScrollPane會自動判斷它們自動atically。 – Capsule 2011-04-04 21:53:29

@膠囊 - >好吧，答案正在工作......理論上。但不適用於Chrome和Safari。樣式現在設置，但膠囊說...'（讀）'。有沒有可能使用一些圖像預加載？ - 和不！Safari和Chrome無法很好地處理jScrollPane：由於未知的圖像風格，滾動卡在「滾動」中間！（高度和STRANGE：寬度！） – 2011-04-04 21:59:50

如果您使用$（window）.load（）如其他評論中所述，是的，它會起作用，但它可能意味着在應用jScrollPane之前出現惱人的延遲（它必須等待所有要加載的圖像）。這就是爲什麼我說這不是一個可接受的解決方案。 – Capsule 2011-04-04 22:04:03

它不會解決你的問題，因爲width（）和height（）是在事件被觸發時計算的。如果圖像未加載，則會被擰緊（寬度和高度爲0，或IE中的某些像素）。

你可能想用這個方法： http://jscrollpane.kelvinluck.com/settings.html#autoReinitialise

來源

2011-04-04 21:46:47 Capsule

感謝您對此問題的興趣。我重新編輯了一下我的問題......甚至使用'$（window）.load（function（）{'和'imageWidth = $（'。scroll_pane img'）。attr（「width」）;'我得到同樣的結果！...一些想法？（甚至使用：'var img = new Image（）;'會不好？ – 2011-04-04 21:51:01

你試過jScrollPane的autoReinitialise選項嗎？我有很好的結果。 – Capsule 2011-04-04 22:07:43

@ Capsule I （）函數（）{'但是對於jScrollPane'調用'$（'。scroll_pane'）。jScrollPane（）;'和@Cybernate答案！（我用解決方案重新編輯了）+1對於偉大的建議！ – 2011-04-04 22:21:50

get image WIDTH和HEIGHT併爲任何圖像寫屬性

回答

相關問題