javascript image rotator問題，默認圖像

Question

我寫了一個簡單的JavaScript圖像旋轉器，它在每個頁面加載時選取一個隨機圖像。問題是，如果我使用默認圖像，那麼在javascript加載並替換它之前，該默認圖像將顯示一秒。很明顯，如果有人禁用JavaScript，我希望他們看到圖像。我怎樣纔能有一個默認圖像沒有閃爍的默認圖像。

Answer 1

這聽起來像你想在window.onload觸發前更改頁面HTML（因爲那時默認圖像已經顯示）。

您需要將您的JavaScript函數附加到「DOMContentLoaded」或通常稱爲domready事件。 Dean Edwards爲我們提供了一個夢幻般的跨瀏覽器實現http://dean.edwards.name/weblog/2006/06/again/。

希望能幫到:)

Answer 2

如果您隱藏默認圖像作爲頁面加載時執行的第一件事，那麼用戶可能不會看到圖像。然後，您可以在圖像上安裝onload處理程序，並將其源代碼更改爲隨機圖像。加載圖像時，您可以取消隱藏圖像。

window.onload = function() { 
    var img = document.getElementById("rotating_image"); 

    // Hide the default image that's shown to people with no JS 
    img.style.visibility = "hidden"; 

    // We'll unhide it when our new image loads 
    img.onload = function() { 
     img.style.visibility = "visible"; 
    }; 

    // Load a random image 
    img.src = "http://example.com/random" + Math.floor(Math.random() * 5) + ".jpg"; 

}; 

Answer 3

您可能還想考慮在圖像後立即放置JS。這可以在該點執行JS而不是在頁面加載時執行。但我不確定這一點。

<img src="/not/rotated/image.jpg" /> 
<script type="text/javascript"> 
// change image 
</script>