OK, I'm losing my mind over this. I did read here at SO and google about it, I even have the preloader set (found here on SO), but none of the plugins/code I found helped me.
What I want to do is: wait until all images are preloaded and only then execute all other javascript code. As far as I'm concerned it can (but not a must) have a "loading..." message.
The fact is that I have a pretty big image in the body background and 2 other images which are also bigger, and so I would like to preload them so that then they would show instantly and would not have that ugly "loading" image effect.
This is what I'm using now but it's not good:
$(document).ready(function()
{
preloadImages();
...some other code...
function preloadImages(){
imagePreloader([
'images/1.png',
'images/2.jpg',
'images/3.png',
]);
}
function imagePreloader(arrayOfImages) {
$(arrayOfImages).each(function(){
(new Image()).src = this;
});
}
}
I don't know, maybe I should call this preloader somewhere out of the .ready()? or sth like that, please help...
Btw, yes, I also read this post and I don't know why but .ready() works faster for me :(
EDIT:
Ok, so finally I got this thing to work. My problem? I was setting the waiting div wrong. This is my code now: I have the loading div which I show above everything and then when all images load (using $(window).load(function(){...}); as suggested I, hide that div.
<div id="loading">
<div id="waiting">
<img class="loadingGif" src="images/loading.gif">
</div>
</div>
#loading
{
background-size: 100%;
background-color:#000;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
z-index:999;
}
#waiting
{
margin-left: auto;
margin-right: auto;
position:absolute;
top: 39%;
left: 27.81%;
width: 45%;
height: 150px;
background-color: #FFF;
border: 12px solid #FF771C;
text-align: center;
}
And my jQuery code is this:
$(window).load(function()
{
$('#loading').addClass('hidden');
...
}
The document. ready() function will be executed as soon as the DOM is loaded. It will not wait for the resources like images, scripts, objects, iframes, etc to get loaded.
Preload lets you tell the browser about critical resources that you want to load as soon as possible, before they are discovered in HTML. This is especially useful for resources that are not easily discoverable, such as fonts included in stylesheets, background images, or resources loaded from a script.
Instead of trying to preload, you could just execute your script on...
window.onload = function(){..}
That doesn't fire until all images have been loaded.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With