Question

So I just started learning Javascript and jQuery at the same time, and it seems easy.

Now I am making a function that shows a loading image (I made mine on http://www.ajaxload.info/) but I want something that’s more cool, like maybe an image that changes every time…

Also, sometimes my loading image appears under other stuff I have no clue why so I am trying to fix that problem, if you have any hints please let me know.

Here is what I have now:

...
<img id="loading" src="loading.gif" />
...
<script>
function load(){
 $("#loading").fadeToggle();
}
</script>

Answer 1

I have done this with my projects, very interesting idea! So here’s how i do it.

Of course you can tweak this as you wish and i am sure there are lots of stuff you can do to make it more beautiful but here is what you can do with minimal configuration.

CSS :

.preloader{
    z-index: 1001;  // This is what controls the layer position (the more it's high the more it becomes on top) I put 1001 because i don't use z-indexes more than 1000 but idk about you..
}

HTML :

<div class="preloader">
    <img src="images/preloaders/1.png" /> <!-- You can add restriction to the size of the preloader image, you can also apply styling to the div so that it covers the whole page (making a 'modal' effect) -->
</div>

Javascript (jQuery) :

<script>
var MAX_PRELOADERS = 5; // How many different preloaders do you have ? (Make sure they are named appropriately : 1.png , 2.png ... 5.png (and in the right folder)

function showHidePreloader(){ // Basically just the same as yours
    $(".preloader img").fadeToggle();
}

function changePreloader(){
    var new_preloader = Math.round(Math.random() * MAX_PRELOADERS) + 1; // This will generate a number between 1 and MAX_PRELOADERS
    $(".preloader img").attr("src","images/preloaders/"+new_preloader+".png"); // Make sure to correct the path and extension if they're different
}
</script>

BTW, for preloaders i use this site : http://preloaders.net/
I am sure you will like it! It’s far better than the one you have.
So basically just call the changePreloader() when you want to change it, and well for the first function you know how to use it already 🙂