在腳本之前加載圖像

我有一個腳本來爲每個頁面調整背景圖像的大小。碰巧有時候較慢的機器和含有大量內容的頁面（其他圖像）背景圖像會變得拉長。在腳本之前加載圖像

Inittialy我有這個

$(document).ready(function() { 
    ...code for resizing the image... 
});

和我決定，這只是圖像後執行（id爲img_bg）的代碼加載，所以：

$("#img_bg").ready(function() { 
    ...code for resizing the image... 
});

我得到更好的結果，但仍然不盡如人意。

有沒有人有任何其他的想法？

由於

來源

2011-11-25 peterK

根據jQuery的文檔[1] 。就緒（）真後，才元件完全加載執行。所以你的問題可能是，在你的調整腳本完成它的工作之前有一個角度時間。（特別是如果其他事情要同時處理）解決這個問題的一種方法是簡單地隱藏圖像，直到完成調整大小爲止。在縮放方法末尾使用顯示 [2]函數，並在此css中爲#img_bg最初設置display="none"。

但是，您應該考慮一下您的整個設置。如果您只使用較小的圖像，那麼加載較大的圖像然後用javascript重新設置它永遠不會很聰明。那麼最好有一個更小的開始（爲了節省帶寬，並因此增加加載速度）

而另一個想法是，這個調整大概可能會實現一個聰明的使用一些CSS而不是JavaScript。但是，因此你必須提供一些關於你的腳本如何工作以及它在做什麼的更多細節。

[1] http://api.jquery.com/ready/

[2] http://api.jquery.com/show/

來源

2011-11-25 00:18:16 s1lence

感謝您的解釋。很有用。關於用css調整圖像的大小我已經嘗試了過去，但與javascript一樣成功。它所做的是比較瀏覽器的寬度和高度值，並調整圖像的寬度或高度。然後將圖像的中心定位在瀏覽器畫布的中心，最後調用window.resize函數。只要我到達計算機，我就會嘗試一下關於隱藏的提示，並在調整大小後顯示圖像。非常感謝 – peterK

如果立即將JavaScript代碼的DIV/HTML控件後，那麼它仍然會執行時控制準備好了，你不需要一個「準備好「聲明。

document.ready只是表示所有HTML都已加載，您可以對dom執行任何操作，但您可以在整個頁面準備就緒之前修改元素。

來源

2011-11-25 00:19:39 MindingData

但是網站的所有網頁都需要調整圖片大小的功能。而且這個功能不是3-5線，它有大約40線。我不認爲將所有代碼放在每一頁中都是非常正確的。謝謝 – peterK

在腳本之前加載圖像

回答

相關問題