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，其中包含源作为图像，在这种情况下，图像将在实际页面加载之前加载。

<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时，将立即加载图像。

在jQuery中预加载背景图像

3 个答案: