Javascript异步加载背景图像

是否可以异步加载背景图像

我见过许多jQuery插件以异步方式加载普通图像，但我找不到是否可以预加载/异步加载背景图像

编辑

我澄清我的问题。我一直在这个试验场工作 背景图像是从一组图像中随机加载的，这些图像由一个chron作业每小时刷新一次（该作业在flickr目录上获取随机图像）

主机当前空闲且速度较慢，因此加载背景图像需要一些时间

第一个覆盖层（带有PNG透明mentalfaps徽标的覆盖层）的位置和宽度由

jQuery（document）.ready

construct中创建的函数调节

如果您多次尝试刷新页面，则右侧覆盖div的宽度为0（因此您会在布局中看到一个“孔”）

以下是设置我的位置的方法：

function setPositions(){
    var oH = $('#overlay-header');
    var overlayHeaderOffset = oH.offset();
    var overlayRightWidth = $(window).width() - (overlayHeaderOffset.left + oH.width());
    if (overlayRightWidth >= 0) {
        $('#overlay-right').width(overlayRightWidth);
    } else {
        $('#overlay-right').width(0);
    }
    var lW =  $('#loader-wrapper');
    lW.offset({
        left: (overlayHeaderOffset.left + oH.width() - lW.width())
    });
}

问题是

$（window）.width（）

低于有效窗口宽度！因此检查失败，脚本选择

$（“#覆盖右侧”）。宽度（0）

有什么想法吗？
我不确定我是否真的理解你的问题，但是背景图像（和所有其他图像）已经异步加载了-浏览器在解析HTML时遇到URL时将立即启动对它们的单独请求

有关装载顺序的背景信息，请参阅此优秀答案：

如果您是指其他内容，请澄清。
在后台加载内容的诀窍是加载一次，因此下次加载时，它已经在缓存中

将以下内容放在html的末尾：

<script>
    var img = new Image();
    img.onload = function () {
        document.getElementsByTagName('body')[0].style.backgroundImage = 'background.png';
    };
    img.src = 'background.png';
</script>


var img=新图像（）；
img.onload=函数（）{
document.getElementsByTagName（'body'）[0].style.backgroundImage='background.png'；
};
img.src='background.png'；
您可以在头部使用预回迁链接

<link rel="prefetch" href="/images/background.jpg">



您应该能够通过JavaScript将这些链接添加到头部。
如前所述，背景图像是异步加载的。如果需要从JQuery代码加载背景图像，还可以设置addClass（）方法来设置CSS类或attr（“style=\”背景图像：url（'myimage.png'）\”）
我喜欢使用CSS为页面加载填充背景颜色

在DOM就绪事件之后，我使用jQuery修改CSS并添加背景图像。这样，直到页面加载之后才会加载图像。不确定是否使用async，但该方法为用户提供了良好的体验

例如：

右侧导航链接具有背景图像。页面将使用背景色进行初始化。页面加载后，通过jQuery将其替换为背景图像。
我自己找到了答案，这是因为
.offset（）
方法有时给出了错误的值

我使用
.position（）
写入值：

此文件中的更改jquery.ImageOverlay.js

设置您的高度和宽度，并享受此

imageContainer.css({
            width : "299px",
            height : "138px",
            borderColor : hrefOpts.border_color
        });

缓存图像后，从浏览器对该图像的所有调用（不考虑元素）都将调用缓存版本，直到缓存过期。我非常确定所有图像都是异步加载的。问题的标题与答案不匹配。问题是关于图像的异步加载。
imageContainer.css({
            width : "299px",
            height : "138px",
            borderColor : hrefOpts.border_color
        });