We Keep Coding

How do I replace the background image of a webpage in Javascript before it's loaded?

I am currently overwriting the CSS of a webgame I play to give a more pleasant user experience. The only thing that I am having difficulty with is replacing the background image correctly, as the original background image loads onto the screen before the script replaces it to a solid color. The solid color that I am replacing it with loads, but not until after the page loads.
Here is a gif of the issue I am running into.
I have tried using document.onload, .onDomContentLoaded, .ready, etc, but for some reason none of these are working. Is there any way I can prevent the background image from loading before the script is run?

window.onload will wait for all the resources to load.
However, it sounds like you should just add a background-color to the element and let the background render beneath it.

Have you tried the property as important? background-color: gray !important
I think this should prevent the image from showing up at all

Place this in an external Javascript file, and make a request for it before anything else in your head.
var myImage = new Image();
myImage.src = 'your_image_here';
What happens is that an external Javascript file blocks the rendering of the page. And the script itself will not finish till the image has been downloaded. So there won’t be any delay when you do switch the background.

You could use:
document.style.backgroundImage="url('img.png')";

I believe AmmarCSE is hinting at a possible answer, but the cause is unknown.
You should first review your HTML for the order in which your resources are loaded. The CSS is a loaded resource and can specify background colors and images. This will possibly explain the following:
If your CSS specifies colors/image resources, and the HTML loads the CSS resource prior to executing your document functions, you will continue to get this behavior.
You should review the CSS for the background image/color and change it there instead of attempting to override it with document functions.
This is an assumption of the problem. You should provide some HTML, JavaScript, and CSS in your original post to help others answer and review.

Preload images without names of images

i'm looking for a script or a way to preload images before the page become full load. What i found are script where i have to write the name and the root of the images, i need something that load like:
Load all img of the page, after show the page, during the loading of the images to show a preload image ( like loading or something like that ).
It's possible?
I have alrady tried the script on the web, but i found just script where i have to put the name of the images in a array... i don't need it!
I want that javascript load before ALL tag ( without i set the name of the images ) of the page and than show the page!

jquery has a plugin called imageready.
https://github.com/weblinc/jquery-imageready
Ive used it many times, it should work as you expect

Images will start being downloaded by your browser as soon as the DOM renders that part of your HTML. What you need to do is find a suitable animated gif very small size (few kilobytes) of a loading animation. Then have some javascript hide the image you want to show that is still getting downloaded by your browser. By using something like: Javascript callback for knowing when an image is loaded you will be able to check when an image has loaded, and the callback you can hide its associated gif and show the real image.

One div and its content on website loading last

UPDATE : With help from #TrueBlueAussie,
Yes, since I am not hiding the div, the code below is useless. So ignoring it (The script I used below) , is there a proper solution to my problem.
I have a website, http://frankvinyl.com/
It is a wordpress website. The featured image at the top, it loads after all the website is loaded.
I tried for different solutions for loading the DIV first, but its not working.
$(document).ready(function() {
$("#main1").show();
});
The problem is, the content of #main1 loads after all the website and content is loaded. I just want to load the div with the flow as the rest of the content.
Have been tweaking around but cannot find a appropriate solution.

You are waiting for the document to be ready in your jquery.
Try putting $("#main1").show(); before the document ready.
Don't know if it will work, it has been a long time :p

Position loader while the image is loading

UPDATED LINKS
I'm trying to add a loading image on my images while they are loaded, but I don't know why it doesn't want to work for me...
I'm trying the solution's posted here: Loaders java script
I want to add a loading images on the .thumb images while they are loading. Because I'm copying this element when it is loaded and doen't look good while the images are beeing loaded.
I'm not very strong at scripting, so please forgive me...
Here is where I want to place it
Thank you,
UPDATE: In case you have a good internet connection, here is a screenshot of what is happening and what I want to hide, while the images are being loaded.

Load the all css & js for the page before downloading the "big list of images"

I have a website that displays a list of around 20 auto-played slideshows(each containing 4-5 images) in a page. Now the problem is that this is taking up a long time to load the website(& ofcourse it would, since so many images) but I am wanting to preferentially load all the neccessary css and js files at first, so that the other components on the page are properly rendered before the images begin to download.
So... Is there a way to set a preferential order of loading of the requested resources ?

Is there a way to set a preferential order of loading of the requested resources
Yes - put them in that order in your HTML file!
I am wanting to preferentially load all the neccessary css and js files at first, so that the other components on the page are properly rendered before the images begin to download.
That's a different problem.
Your page components cannot be properly rendered until the dimensions of most elements are known. So, if you have other images in your page layout, those need to get loaded first, or have their width and height attributes specified in the markup.
Since your slideshow images would be mixed in with the rest of your layout if you used pure HTML to load them it sounds like you have little choice but to instead load all of your slide show images from Javascript, per other comments and answers.

Better way then using the dom to create elements have your divs or even img tags src be blank then load them with the images you want in an onload function using innerHTML:
function images(){
var place_to_put_image = document.getElementById("image_div");
place_to_put_image.innerHTML = "<img src=\"your_image_here\"></img>";
}
<body onload="images()>
<div id="image_div></div>
</body>
you could put your images in an array and assign the innerHTML of the div or whatever to the array as well if you want them all in the same place or you could put the onload in div or where ever you want the images to load.

There a few ways you can go about doing it but they all involve not actually putting the images in the HTML - at least not correctly. One way that I like to do it is to add the image src URLs to another property like the alt (not great for accessibility) or rel. Also, give all the images a class that will be used to hook into it with JS.
<img alt="images/foo.jpg" class="loadlater" />
Then in your JS, get all elements with class="loadlater" and set the source to the alt value.
img.src = img.alt;
You didnt mention jQuery. If you were using jQuery, the command to swap the attributes would look like this:
$('.loadlater').each(function() { this.src=this.alt; });
Then, wherever and whenever you call this, the images will be loaded. You will want to call it after your css and js finishes loading - probably the document.load function. Again, if you were using jQuery, it would look like this:
$(function()
{
$('.loadlater').each(function() { this.src=this.alt; });
});