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/

页面已加载后，加载另一个图像并使用它来替换页面的当前BackGround图像

1 个答案: