页面已经加载后，加载另一个图像并使用它来替换页面'；的当前背景图像 - After page has already loaded, load another image and use it to replace the page's current BackGround image

After page has already loaded, load another image and use it to replace the page's current BackGround image

我的网站首页有一个相当大的图像作为背景，当然我已经把它做得尽可能小，但在慢速连接上加载仍然需要一段时间。

因此，如果用户在我的网站上停留一段时间，我想将背景图像更改为另一个。我看到一些插件有类似的功能，但它们似乎都是先加载图像的。这对我来说会很慢

所以我想正常加载页面。然后在后台加载另一个图像，并在加载后替换原始图像。这可能吗？

确定在正文中设置一个图像标签，如下所示：<img id="bgqueue" />

你的CSS会隐藏这一点：

#bgqueue {
    display : none;
}

你的jQuery看起来像这样：

setTimeout(function() {
    $('#bgqueue').attr('src', 'http://someOtherjpg').on('load', function() {
        $('body').css({background: 'url(' + $(this).attr('src') + ')'});
    });
}, 30000);

因此，在该示例中，图像在30秒后被加载到幕后的图像标记中，一旦加载，回调就会触发并将主体背景图像设置为缓存文件。

演示：http://jsfiddle.net/seancannon/TpPkk/