CODEWITHSUNDEEP
javascript
mxadam
mxadam

Reputation: 167

preload image then change background javascript

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

Upvotes: 3

Views: 4298

Answers (3)

Esteban
Esteban

Reputation: 3139

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.

Upvotes: 3

webduvet
webduvet

Reputation: 4292

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

Upvotes: 1

CoursesWeb
CoursesWeb

Reputation: 4237

You can preluad image using Image() object.

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

Upvotes: 1

Related Questions