How to prevent the white 'flash' on page load created by background image loading delay?
Don't delay loading parts of your site - what if the background image were to have an error in transmission and never arrive? Your scripts would never load.
Instead, if you really dislike the "white" flash, set the background color of the document to a more pleasing color, more in line with your background image. You can do so in the same css style:
body {
background: #EDEBED url(myGrayBackgroundImage.jpg);
}
It's simple, has virtually no cost, won't break, and won't delay things from downloading unnecessarily. It looks like you're already doing something like this - I wouldn't change it. I don't think anybody has the expectation that your site look a certain way before it loads.
You may use something like this:
HTML
<!-- Add a class to flag when the page is fully loaded -->
<body onload="document.body.classList.add('loaded')">
CSS
/* Hide slider image until page is fully loaded*/
body:not(.loaded) #slider img {
display:none;
}