Instead of having separate files for different elements on my site, I decided to keep all the JavaScript in one large file called my_scripts.js. To speed up loading times, I defer the loading of this file using inline JavaScript and make sure it is the last thing that loads on each page.
I also wanted to defer the loading of a large background image used for the HTML body. I removed the background image from the body's CSS class and added the following line at the beginning of my_scripts.js:
document.body.style.backgroundImage = "url(my_background.jpg)";This way, the necessary CSS for displaying the background image is loaded dynamically with JavaScript after everything else has been loaded. However, I noticed that the background image flickers every time I navigate between pages, indicating that it is being reloaded each time. Why isn't my_scripts.js being cached by the browser as expected?
UPDATE: The issue persists even when I try preloading the image with the following code:
if (document.images) {
img1 = new Image();
img1.src = "my_background.jpg";
}