腳本不工作在Safari和Chrome的document.ready（FF好吧），但在document.resize

我有以下jQuery腳本來調整圖像的大小，並給它一個左邊距以水平居中。該腳本在FF中完美工作，但在Safari和Chrome中，我遇到了問題。腳本不工作在Safari和Chrome的document.ready（FF好吧），但在document.resize

Safari瀏覽器Chrome的&概率：圖像調整大小還好，但LEFTMARGIN似乎設置之前調整圖像的大小導致該推太最左邊的圖像。此問題僅在document.ready上發生。在調整瀏覽器大小時，腳本可以正常工作。

function imageresize() { 
    var h = $(window).height(), 
     w = $(window).width(), 
     newHeight = h * 0.5, 
     newTopMargin = newHeight * 0.12; 

     $('img.resize').css({'height' : newHeight + 'px', 'margin-top' : '-' + newTopMargin + 'px'}); 
    var leftMargin = (w - ($('img.resize').width()))/2; 
     $('img.resize').css('margin-left', leftMargin + 'px'); 

} 
$(document).ready(function() { 
    imageresize(); 
}); 

$(window).resize(function() { 
    imageresize(); 
});

該腳本放置在</body>之前。

任何援助將不勝感激！

來源

2011-04-18 circey

你總是可以嘗試將它放在SetTimeout（1）中，看看是否有幫助:) – Brad 2011-04-18 04:56:00

只要有可能，就避免嘗試這樣的事情。 JS是事件驅動的，所以它應該加載在正確的觸發器上，而不是假定需要1秒加載。 – wesbos 2011-04-18 05:02:40

*（無論如何; - ）* – circey 2011-04-18 05:07:32

文檔準備就緒事件可以在圖像加載完成之前觸發。嘗試綁定到窗口，或改爲圖像'load event。

$(window).load(function() { 
    imageresize(); 
}); 

// or 

$('img').load(function() { 
    imageresize(); 
});

來源

2011-04-18 04:59:28

完美 - window.load適用於所有瀏覽器！我仍然在學習很多關於jQuery的知識 - 我認爲document.ready總是最好用！非常感謝:-) – circey 2011-04-18 05:06:46

jQuery的要點是適用於所有瀏覽器！無論如何，文檔準備就是最好的選擇......當然，直到你的代碼依賴於加載的圖像。 – 2011-04-18 10:51:34

如果它只是一個圖像，您還可以綁定到圖像加載事件。

$(img).load(function() { 
    imageresize(); 
});

來源

2011-04-18 05:01:21 wesbos

腳本不工作在Safari和Chrome的document.ready（FF好吧），但在document.resize

回答

相關問題