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 · Accepted Answer · 2013-10-06 18:02:39Z

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 6, 2013 at 18:02

answered Oct 6, 2013 at 15:08

Esteban

3,1273 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mxadam Over a year ago

this makes the page flash white as it changes background, anyway to stop that?

Esteban Over a year ago

Something along these lines should do it: jsbin.com/admmx/2/edit?css,js,output. It might need a bit of tweaking, just let me know.

CoursesWeb · Accepted Answer · 2013-10-06 15:09:48Z

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 6, 2013 at 15:09

CoursesWeb

4,2573 gold badges24 silver badges27 bronze badges

1 Comment

mxadam Over a year ago

this makes the page flash white as it changes background, anyway to stop that?

webduvet · Accepted Answer · 2013-10-06 15:16:50Z

1

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

answered Oct 6, 2013 at 15:16

webduvet

4,2922 gold badges30 silver badges39 bronze badges

Collectives™ on Stack Overflow

preload image then change background javascript

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related