在jQuery中預加載背景圖像

我在加載背景圖像時遇到了問題。這是我的嘗試，但似乎仍然沒有工作 - 即。當我調用showAjaxLoader（「＃mytarget」）時，看到圖像仍然存在延遲。有人有任何建議嗎？在jQuery中預加載背景圖像

CSS：

div.entryform-ajax-loader { 
    background-image:url(../images/preloader-entry-form.gif); 
}

腳本：

var ajax_loader = $('<div />').attr('class', 'entryform-ajax-loader'); 

function showAjaxLoader(target) 
{ 
    $(target).append(ajax_loader); 
} 

function hideAjaxLoader(target) 
{ 
    ajax_loader.remove();

來源

2011-05-17 Chris

它怎麼不起作用？它拋出一個JavaScript錯誤，或者它只是不預加載圖像？ – 2011-05-17 05:44:23

對不起，我應該更好地解釋，請再次看到我的問題，我編輯了它..... – Chris 2011-05-17 05:46:06

除了關閉「}」功能hideAjaxLoader（目標） – Hoque 2011-05-17 06:00:40

一個div添加到你的頭它有源代碼作爲你的圖片，在這種情況下，圖像將在實際頁面加載之前加載。

<div style="display:none"> 
<img src="../images/preloader-entry-form.gif"> 
</div>

來源

2011-05-17 05:49:10

如果我稍後在頁面中使用相同的圖像，這會使圖像加載兩次嗎？它會影響頁面性能嗎？或者圖像只加載一次，然後從瀏覽器內存中使用等等？ – Faizan 2015-04-17 12:44:13

<div style="display:none"> 
<img src="../images/preloader-entry-form.gif"> 
</div>

在頁面主體的頭，或者如果你需要的JQuery解決方案

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

來源

2011-05-17 05:46:03 Danzan

作爲altermative解決方案，您可以在此腳本添加到您的文件，

$(function() { 
$(document.body).append($("<img />").attr("src", "../images/preloader-entry-form.gif").hide()) 
});

它將在頁面加載的開始加載圖像。結果，當showAjaxLoader函數將被執行時，圖像將被加載而沒有任何延遲。

來源

2011-05-17 06:36:47 Hoque

在jQuery中預加載背景圖像

回答

相關問題