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

即时更改脚本标记内的以下代码的背景图像。当背景发生变化时，这会导致白色闪光，我的所有页面都是ajax。我不能像背景一样选择背景颜色，也可以在配置文件页面上使用此背景，并且每个配置文件都有不同的背景。预加载图像，然后更改背景javascript

是否有可能预载图像，然后改变背景来停止whiteflash？感谢

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

来源

2013-10-06 mxadam

你可以加载一个隐藏的图像，并在图像完成加载，这样的改变：

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-06 15:08:16 Esteban

这使得页面闪烁的白色，因为它改变了背景，反正停止吗？ – mxadam

沿着这些线应该做些什么：http://jsbin.com/admmx/2/edit?css,js,output。它可能需要一点调整，只是让我知道。 – Esteban

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

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

来源

2013-10-06 15:09:48 CoursesWeb

这使页面闪烁白色，因为它改变背景，反正要停止？ – mxadam

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

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

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

下面是一个例子fiddle

来源

2013-10-06 15:16:50 webduvet

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

回答

相关问题