預加載圖像稍後顯示點擊事件jQuery

我有一個網頁，其中很多圖像從服務器使用圖像調用 scr屬性。預加載圖像稍後顯示點擊事件jQuery

我創建了一個類似的功能，由td單擊觸發。

function GoToStep(stepNo) { 
var imgSrc = $("#h1" + stepNo).val(); 
     $(".img_vertical").css("background-image", "url(" + imgSrc + ")"); 
}

現在的問題是這樣的。對於較慢的連接，圖像會在一些時刻後出現。

我預先載入圖像能避免當用戶點擊 TD等待時間？

我已經看到一些jquery函數來預加載圖像。

請給我一些想法，我該如何實現它。

來源

2011-12-08 शेखर

預加載圖像相當於加載圖像，但從來沒有顯示它。所以，你可以很容易地做到這一點：

<img src="image.png" alt="" style="display:none;"/>

現在這個圖像將在html開始渲染後立即加載。無論何時您需要將此圖像用作顯示或背景，只需將地址設置爲image.png，然後將自動從瀏覽器的緩存中提取。

來源

2011-12-08 08:16:27

我認爲頁面會很重（大小），因爲我在頁面上至少有40張圖片。每次點擊都必須更改同一個div的背景圖片。在頁面加載中創建一個圖像陣列然後在td點擊改變圖像是一個好主意。 –

，因爲您必須在顯示圖像之前預先加載圖像，所以頁面必須很重。你不能阻止它（即使你以正常的方式加載它們，因爲尺寸是固定的）。要麼爲系統選擇更好的設計，要麼選擇最好的設計，然後嘗試這裏討論的任何預加載選項。我的回答只是這樣做的線索，sshow的回答更好，因爲它不會「破壞」DOM。 –

這可以使用一些JavaScript函數來完成。從another question引用。預加載器的JavaScript如何工作的

function preload(arrayOfImages) { 
    $(arrayOfImages).each(function(){ 
     $('<img/>')[0].src = this; 
     // Alternatively you could use: 
     // (new Image()).src = this; 
    }); 
} 

// Usage: 

preload([ 
    'img/imageName.jpg', 
    'img/anotherOne.jpg', 
    'img/blahblahblah.jpg' 
]);

解釋（different question）

[...]它的工作原理是簡單地通過創建一個新Image對象並設置它的SRC的方式，瀏覽器會去抓圖像。我們不是將此特定圖像添加到瀏覽器中，但是當時間到了以通過我們設置的任何方法在頁面中顯示圖像時，瀏覽器將已將其存儲在其緩存中並且將不會獲取它再次。 [...]

所以你的情況，你應該使用類似

$(function() { 
    // Do stuff when DOM is ready 
    preload([ 
     'img/bg1.jpg', 
     'img/bg2.jpg', 
     'img/bg3.jpg' 
    ]); 
});

來源

2011-12-08 08:12:01 sshow

你能否給我提供一些示例，因爲我爲每個td創建了一個隱藏字段，並在該隱藏字段中保留了imge-scr。 –

現在我怎麼能按索引使用預加載？我如何設置div的背景，如果我已經預先加載了圖像。你能給我提供它的語法嗎？ –

'preload（）'運行後，圖像被預加載。在你運行這個函數之後，你不必再考慮它了。 – sshow

預加載圖像稍後顯示點擊事件jQuery

回答

相關問題