预加载图片然后使用JavaScript更改背景。

Question

预加载图片然后使用JavaScript更改背景。

3

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

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

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

- mxadam

3个回答

1

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

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

- CoursesWeb

2

这会使页面在更改背景时闪白，有什么方法可以阻止这种情况发生吗？ - mxadam

1

我不知道这是否适合您，但我会使用背景包装器和内容包装器。这样，我可以在不太担心页面其他部分的情况下动画更改我的背景。如果您事先了解图片，则可以使用CSS类平滑地更改它们。

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

当然，我会编写一些代码来处理浏览器窗口的重新调整。这里有一个示例 fiddle。

- webduvet

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Esteban · Accepted Answer

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

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。