preload image then change background javascript

Question

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');

Esteban · Answer 1 · 2013-10-06T18:02:39.540

3

You 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.com/admmx/4/edit?html,css,js,output.

edited Oct 06 '13 at 18:02

answered Oct 06 '13 at 15:08

Esteban

3,108
3
32
51

2

this makes the page flash white as it changes background, anyway to stop that? – mxadam Oct 06 '13 at 15:21
Something along these lines should do it: http://jsbin.com/admmx/2/edit?css,js,output. It might need a bit of tweaking, just let me know. – Esteban Oct 06 '13 at 17:17

score 1 · Answer 2 · answered Oct 06 '13 at 15:09

1

You can preluad image using Image() object.

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

answered Oct 06 '13 at 15:09

CoursesWeb

4,179
3
21
27

2

this makes the page flash white as it changes background, anyway to stop that? – mxadam Oct 06 '13 at 15:21

score 1 · Answer 3 · answered Oct 06 '13 at 15:16

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

preload image then change background javascript

3 Answers3

Linked