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

preload image then change background javascript

本文关键字：背景 JavaScript 然后 加载 图像      更新时间：2023-09-26

我在脚本标记中使用以下代码更改背景图像。当背景发生变化时，这会导致白闪，我所有的页面都是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：这是一个在更改时没有背景闪光的示例。 http://jsbin.com/admmx/4/edit?html,css,js,output。

您可以使用 Image（） 对象预置图像。

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

我不知道它是否适合你，但我会在背景中使用包装器，为内容使用包装器。这样，我就可以为背景的更改添加动画效果，而无需过多担心页面的其余部分。如果你事先知道图片，你可以使用CSS类来顺利地改变它们。

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

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

这是一个示例小提琴

相关文章：