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

时间:2013-08-29 16:49:39

标签: php javascript jquery html

我网站的首页有一个很大的图像作为背景,当然我已尽可能小,但它仍然需要花一点时间加载慢速连接。

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

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

1 个答案:

答案 0 :(得分:0)

确定在身体中设置了一个图像标记:<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/