在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中预加载背景图像

回答

相关问题