preload image then change background javascript -


im changing background image following code inside script tag. causing whiteflash when background changes, pages ajax. cant pick background color background im using on profiles page , each profile has different background.

is possible preload image change background stop whiteflash? thanks

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

you load hidden image , change when image finishes loading, 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 code inside function.

edit 2: here example without background flash while changing. http://jsbin.com/admmx/4/edit?html,css,js,output.


Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -