JavaScript异步加载背景图片

Question

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

我看过很多使用 jQuery 插件以异步方式加载普通图像的方法，但我找不到是否可能预加载/异步加载背景图像。

编辑

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

主机是免费的且目前速度较慢，因此需要一些时间才能加载背景图像。

第一个覆盖层（具有PNG透明mentalfaps标志的覆盖层）的定位和宽度由在jQuery(document).ready结构中创建的函数调节。

如果您尝试多次刷新页面，则正确覆盖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);。 有什么想法吗？

- VAShhh

---

一旦图像被缓存，无论元素如何，浏览器对该图像的所有调用都将调用缓存版本，直到缓存过期。 - zzzzBov

我非常确定所有的图像都是异步加载的。 - James

Answer 1

我不确定我是否真正理解了你的问题，但是背景图片（以及所有其他图片）已经异步加载 - 浏览器在解析HTML时遇到URL时将立即开始单独的请求。

请查看这个出色的答案以获取有关加载顺序的背景信息：网页加载和执行顺序？ 如果你指的是其他内容，请澄清。

- Pekka

Answer 2

在后台加载东西的技巧是只加载一次，这样下次加载时它已经在缓存中了。

将以下内容放在你的HTML末尾：

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

- Daniel Baulig

Answer 3

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

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

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

- btford

Answer 4

我喜欢使用CSS在页面加载时填充背景颜色。 DOM准备就绪后，我使用jQuery修改CSS并添加背景图片。这样，图片直到页面加载后才会被加载。不确定异步加载，但这种方法可以为用户提供良好的体验。 例如：http://it.highpoint.edu/ 右侧导航链接有一个背景图像。页面初始化时有一个背景颜色。通过jQuery，在页面加载后将其替换为背景图像。

- Teddy

Answer 5

这个文件 jquery.ImageOverlay.js 的更改

设置您的高度和宽度，享受它...

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

- nikunj

Answer 6

正如已经提到的，背景图片是异步加载的。如果您需要从 JQuery 代码中加载背景图片，您也可以使用 addClass() 方法设置 CSS 类或 attr("style=\"background-image:url('myimage.png')\"")

- Yuri

Answer 7

我自己找到了答案，这是由于.offset()方法有时会给出错误值引起的问题。

我使用.position()得到了正确的值：

 var overlayHeaderOffset = oH.position();

- VAShhh

---

问题的标题与答案不符。该问题是关于异步加载图像的。 - nntona