在 jQuery 中预加载背景图像

Question

我在预加载背景图像时遇到问题。这是我的尝试，但似乎仍然不起作用 - 即。当我调用 showAjaxLoader("#mytarget") 时，看到图像仍然有延迟。有人有什么建议吗？

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();

Answer 1

将一个 div 添加到您的 head 中，其中包含图像的源，在这种情况下，图像将在实际页面加载之前加载。

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

Answer 2

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

在页面正文的头部或者如果您需要 JQuery 解决方案

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

Answer 3

作为替代解决方案，您可以将此脚本添加到您的文件中，

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

这将在页面加载开始时加载图像。因此，当执行 showAjaxLoader 函数时，图像将毫无延迟地加载。