3

我在脚本标签内使用以下代码更改背景图像。当背景发生变化时，这会导致白闪，我的所有页面都是 ajax。我不能只选择像背景一样的背景颜色，因为我也在个人资料页面上使用它，每个个人资料都有不同的背景。

是否可以预加载图像然后更改背景以停止白闪？谢谢

  $('body').css('background-image', 'url(../images/waves.jpg)');
  $('body').css('background-attachment', 'fixed');
  $('body').css('background-size', 'cover');
4

3 回答 3

3

您可以加载隐藏图像并在图像加载完成后更改它，如下所示：

function preloadImage(source, destElem) {
    var image = new Image();

    image.src = source;

    image.onload = function () {
        var cssBackground = 'url(' + image.src + ')';

        $(destElem).css('background-image', cssBackground);
    };
}

用法：

preloadImage('images/waves.jpg', 'body');

编辑：将代码包装在一个函数中。

编辑 2：这是一个在更改时没有背景闪烁的示例。http://jsbin.com/admmx/4/edit?html,css,js,output。

于 2013-10-06T15:08:16.617 回答
1

您可以使用 Image() 对象预加载图像。

var newImg = new Image();
newImg.src = "img2.jpg";
$('body').css('background-image', 'url('+ newImg.src +')');
于 2013-10-06T15:09:48.077 回答
1

我不知道它是否适合你，但我会使用包装器作为背景，使用包装器作为内容。这样我就可以为我的背景设置动画，而不必太担心页面的其余部分。如果你事先知道图片，你可以使用 CSS 类来平滑地改变它们。

<body>
<div id="bg-wrapper" style="position: absolute; left: 0; top: 0"></div>
<div id="content-wrapper"></div>
</body>

当然，我会编写一些代码来调整浏览器窗口的大小。

这是一个示例小提琴

于 2013-10-06T15:16:50.367 回答