预加载图像，然后更改背景javascript_Javascript

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

javascript

预加载图像，然后更改背景javascript,javascript,Javascript,我在脚本标记中使用以下代码更改背景图像。当背景发生变化时，这会导致白光闪现，我的所有页面都是ajax。我不能只选择一个背景颜色像背景一样，因为我也在个人资料页面上使用它，每个个人资料都有不同的背景是否可以先预加载图像，然后更改背景以停止白光闪烁？谢谢 $('body').css('background-image', 'url(../images/waves.jpg)'); $('body').css('background-attachment', 'fixed'); $('bo

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

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

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

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

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：下面是一个在更改时没有背景闪光灯的示例

您可以使用image（）对象预渲染图像

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

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

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

下面是一个例子

当页面改变背景时，它会使页面闪烁白色，不管怎样，为了阻止这种情况的发生，应该做以下几点：。它可能需要一些调整，请让我知道。这会使页面在改变背景时闪烁白色，无论如何，要停止吗？

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