Question

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

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

修改

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

此时主机空闲且缓慢，因此背景图像需要一些时间才能加载。

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

如果您尝试多次刷新页面，右侧叠加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时立即启动单独的请求。

有关加载顺序的背景，请参阅此优秀答案：Load and execution sequence of a web page?

如果您有其他意思，请澄清。

Answer 2

在后台加载内容的技巧是加载一次，所以下次加载时它已经在缓存中了。

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

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

Answer 3

您可以在头部使用预取链接。

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

您应该可以通过JavaScript将这些链接添加到头部。

Answer 4

我喜欢使用CSS来填充页面加载背景的颜色。

在DOM ready事件之后，我使用jQuery修改CSS并添加背景图像。这样，直到页面加载后才加载图像。不确定异步，但这种方法为用户提供了不错的体验。

示例：http://it.highpoint.edu/

右侧导航链接具有背景图像。页面使用背景颜色初始化。它在页面加载后通过jQuery替换为背景图像。

Answer 5

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

设置你的身高和宽度，享受这个......

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

Answer 6

如前所述，背景图像是异步加载的。如果你需要从JQuery代码加载背景图像，你也可以设置addClass（）方法来设置CSS类或attr（“style = \”background-image：url（'myimage.png'）\“”）< / p>

Answer 7

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

我使用.position()：

获得了写入值

 var overlayHeaderOffset = oH.position();

Javascript异步加载背景图像

7 个答案: