javascript - Defered-loaded background image flickers -

javascript - Defered-loaded background image flickers -

i maintain javascript site in 1 huge file - my_scripts.js. on pages, defer loading of file (using in-lined javascript). lastly thing loads.

because html body utilize big background image, thought thought defer loading of image. body css class deleted part: background-image: url('my_background.jpg');

then, first line of my_scripts.js added this: document.body.style.backgroundimage = "url(my_background.jpg)";

now, css needed show background image added main style-sheet javascript. works, big background loads after else has loaded.

but: when navigate between pages, background image flickers. loaded each time. doing wrong? my_scripts.js should in browser's cache! why flicker?

edit: still flickers if preload image with

if (document.images) { img1 = new image(); img1.src = "my_background.jpg"; }

use background-image:url('my_background.jpg)"; instead of document.body.style.backgroundimage = "url(my_background.jpg)";, because, simply, css rule worked no flicker. simple.

javascript html css