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
Post a Comment