php - 页面已经加载后，加载另一个图像并用它来替换页面当前的背景图像

Question

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

因此，如果用户在我的网站上停留一段时间，我想将该背景图像更改为另一个。我已经看到一些插件可以有类似的东西，但它们似乎都首先加载图像。就我的目的而言，这会很慢

所以我想正常加载页面。然后在幕后稍作延迟后加载另一个图像，一旦加载，替换原始图像。这可能吗？

Answer 1

当然在正文中设置一个图像标签，如下所示：<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/