It sets the div with the id “preload” to .hide when the image has loaded. It works well but I wonder if there is a way to have it fading in and out more smoothly. I put in some fade out values but it only fades a bit and than disappears abruptly.
Also is there a way to have it show up smoothly rather than it’s directly visible on page load?
I couldn’t see actual image loading. The loader was going on continuously.
Anyways, just use fadeIn() for your image that loads and fadeOut() for loading gif. No need for .hide().
But just make sure that the position of both image elements are independent of each other. i.e. visibility of one image should not affect position of other since both images will be visible at same time for some time.