html - 有时我网站的背景 JPEG 无法完全加载。刷新不会重新下载。我能做些什么来防止这种情况发生？

Question

我在 Heroku 上托管网站。图像在大约 2/3 的位置停止加载，背景颜色显示出来。这发生在我身上好几次了。刷新页面不会使其消失。唯一的解决办法是清除我的缓存。我显然不希望我的用户这样做。有没有人以前见过这个和/或知道如何避免它？我最近在 OS X Chrome 中看到过这个，不记得我是否在其他浏览器中看到过。这是我的 CSS。

body {
  background: #789cb5 url('/images/login_bg.jpg') center center fixed no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 1

最好使用 jQuery 执行此操作。您每次都会获得稳定的结果，并且与 background-size 不同，它是跨浏览器兼容的。我们使用 IMG 标签使其成为背景，它会自动调整大小以适应窗口大小。 .

function bg() {
    var ww = $(window).width(),
        wh = $(window).height(),
        $bg = $('#bg');
    $bg.height(wh).width(ww);
}
bg();
$(window).resize(function() {
    bg();
})

在 http://jsfiddle.net/njC4d/2/ 查看工作示例