我可以顯示一個加載指標，而javascript圖像傳送帶加載36圖像？

我使用Nivo Slider Nivo Slider作爲圖像傳送帶。但是，我需要嵌入PowerPoint演示文稿，因此我將所有幻燈片轉換爲總共大約3.5 MB的JPG圖像。現在需要一段時間才能加載所有圖像。但在加載時，包含的div區域完全是空的，並顯示頁面背景。我可以顯示一個加載指標，而javascript圖像傳送帶加載36圖像？

我的問題是我是否可以在加載全部36張圖像時顯示某種加載指示。另一個可能的選擇是執行延遲加載的圖像，以便僅加載第一個圖像，並且當用戶單擊下一個箭頭以轉到下一個圖像時，它會加載等等。這些選項中的任何一個都可能？

編輯：在回答下面的評論 - 圖像加載靜態的img標籤

來源

2012-07-19 devcoder

兩者都是可能的，請指定如何加載圖像，是靜態img標籤還是加載了javascript？ – sabithpocker 2012-07-19 23:38:21

@sabithpocker - img的標籤 – devcoder 2012-07-19 23:39:37

爲什麼不直接顯示加載指示器，直到DOM被加載？這不是非常用戶友好的，但對於一個演示文稿，這應該是好的... – Amit 2012-07-19 23:47:39

$(window).load(function() { 
    //all resources including external are loaded 
    //remove loading messages and fadein presentation 
    }); 

$('#presentation img').load(function(){ 
    //track individual image load 
    //you can keep a gloabl count and increment as each image load is triggered 
    });

對於延遲加載：

保持圖像位置爲JSON，然後創建在旅途中的圖像元素和追加演示。

編輯

上面提到的是一般的方法，但對於NIVO滑塊看起來他們已經有負載指示器之類的東西，還有什麼是你找誰？您是否想要添加加載圖片？

說明：

當產生密切相關的HTML網頁被完全加載到瀏覽器，並且創建相應的DOM，DOM就緒事件發生時，此時外部資源的開發等圖像可能無法fullt加載。

當包括圖像在內的所有資源都被加載並且頁面已準備好呈現窗口加載事件時。

在NIVO滑塊，他們使用這種樣式：

.theme-default .nivoSlider img { 
    display: none; 
    left: 0; 
    position: absolute; 
    top: 0; 
}

所以圖像默認不加載的現代瀏覽器作爲其顯示爲無。 window.load將在所有圖像實際加載之前觸發（它們不需要顯示頁面，因爲它們被隱藏）

來源

2012-07-19 23:49:00 sabithpocker

嗯，我不熟悉JavaScript代碼寫作。我不知道什麼JavaScript代碼來做這個東西會看起來像。有沒有可以指給我的教程？我現在看到這個http://nivo.dev7studios.com/support/jquery-plugin-usage/部分的含義。我認爲它提到了輪播中的單個圖像加載。我認爲這可能會解決我的問題。 – devcoder 2012-07-20 00:05:14

我可以顯示一個加載指標，而javascript圖像傳送帶加載36圖像？

回答

相關問題