Javascript加载背景图像异步

Question

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

我已经看到很多jQuery插件以异步方式加载普通图像,但我无法找到是否可以预加载/异步加载背景图像.

编辑

我澄清了我的问题.我一直在这个测试网站http://mentalfaps.com/上工作 .背景图像是从一组图像中随机加载的,这些图像每小时由一个计时工作刷新(在flickr目录上随机拍摄图像).

主机现在是自由和缓慢的,因此背景图像需要一些时间来加载.

第一个叠加层(带有PNG透明mentalfaps徽标的叠加层)和宽度的定位由jQuery(document).readycostruct中创建的函数调节.

如果您尝试多次刷新页面,右侧叠加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()低于有效窗口宽度!所以检查失败并且脚本适用$('#overlay-right').width(0);

有任何想法吗？

Answer 1

不确定我是否真的理解你的问题,但背景图像(以及所有其他图像)已经异步加载 - 浏览器会在解析HTML时遇到URL时立即开始单独请求它们.

有关加载顺序的背景,请参阅此优秀答案:网页的加载和执行顺序？

如果您有其他意思,请澄清.

Answer 2

我自己找到了答案，这是一个问题，因为该.offset()方法有时会给出错误的值。

我使用以下方法写入值.position()：

 var overlayHeaderOffset = oH.position();