Im changing the background image with the following code inside a script tag. This is causing a whiteflash when the background changes, all my pages are ajax. I cant just pick a background color like the background as im also using this on profiles page and each profile has a different background.
is it possible to preload the image then change the background to stop the whiteflash? thanks
$('body').css('background-image', 'url(../images/waves.jpg)');
$('body').css('background-attachment', 'fixed');
$('body').css('background-size', 'cover');
Im changing the background image with the following code inside a script tag. This is causing a whiteflash when the background changes, all my pages are ajax. I cant just pick a background color like the background as im also using this on profiles page and each profile has a different background.
is it possible to preload the image then change the background to stop the whiteflash? thanks
$('body').css('background-image', 'url(../images/waves.jpg)');
$('body').css('background-attachment', 'fixed');
$('body').css('background-size', 'cover');
3 Answers
Reset to default 3You could load a hidden image and change it when the image finishes loading, like this:
function preloadImage(source, destElem) {
var image = new Image();
image.src = source;
image.onload = function () {
var cssBackground = 'url(' + image.src + ')';
$(destElem).css('background-image', cssBackground);
};
}
Usage:
preloadImage('images/waves.jpg', 'body');
EDIT: Wrapped the code inside a function.
EDIT 2: Here is an example without the background flash while changing. http://jsbin./admmx/4/edit?html,css,js,output.
You can preluad image using Image() object.
var newImg = new Image();
newImg.src = "img2.jpg";
$('body').css('background-image', 'url('+ newImg.src +')');
I don't know if it would suit you, but I would use wrapper for the background and wrapper for the content. That way I can animate the change for my background without too much worry about the rest of the page. If you know the pictures upfront you can use CSS classes to change them smoothly.
<body>
<div id="bg-wrapper" style="position: absolute; left: 0; top: 0"></div>
<div id="content-wrapper"></div>
</body>
of course I would write some code to look after re-sizing the browser window.
Here is an example fiddle
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745284577a4620483.html
评论列表（0条）