Question

我在脚本标记内使用以下代码更改背景图像。当背景改变时，这会导致whiteflash，我的所有页面都是ajax。我不能选择像背景一样的背景颜色，我也在配置文件页面上使用它，每个配置文件都有不同的背景。

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

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

Answer 1

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

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

Answer 2

您可以使用Image（）对象预先填充图像。

var newImg = new Image();
newImg.src = "img2.jpg";
$('body').css('background-image', 'url('+ newImg.src +')');

Answer 3

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

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

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

以下是fiddle

的示例

预加载图像然后更改背景javascript

3 个答案: