Preloader Does Not Preload And Loads The Page A Second Time

I found this nice jQuery preloader/progress bar, but I cannot get it to work as it is supposed to. The problem is that it first loads my page and after my whole page is loaded the

Solution 1:

I could be very, very wrong here, but in my opinion:

1. The plugin is flawed.
2. You have some issue in your page that causes a redirect.

I have created a test fiddle and found out the following:

1. If there are no images on the page, then the plugin's private function completeImageLoading();is never called because it is only bound to the image elements. When there are no images -> there's no binding -> no triggering -> nothing completes -> you stay with overlay 0% as demonstrated by the fiddle that is NOT RUN (jsfiddle doesn't see relative images when the page is not run).
2. The plugin doesn't take into consideration remote images. So if you declare them like so <img src="http://example.com/image.jpg"> - then it won't work because the plugin doesn't recognize them. In fact it is using $.ajax to load images which, obviously, generates a error when trying to access another domain.
3. The plugin doesn't reload the page (at least in Google Chrome)... check your console output while in the fiddle. It displays the message once per click on Run.

Suggestions:

1. Make sure you provide at least one relative or background image (though I haven't tested backgrounds...) for the plugin to work.
2. Show us more code. The fiddle demonstrates that the plugin does NOT cause page reload (at least in Chrome... are you using another browser?). It must be something you made that interferes here.
3. Specify some options for the plugin (behaves weird when there are none).

---

Edit regarding preloader

Regarding preloader... if displaying progress is not mandatory for you, then you can just use a window.onload trick. On DOM ready $(...) you create an opaque page overlay with a "Please wait..." message and some animation if you fancy it. Then you wait for window.onload event which "fires at the end of the document loading process... when all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading." When window.onload triggers, you just remove your overlay and voila - the page is ready!

Edit 2 regarding preloader

Actually, you don't even need $(...)... what the hell was I thinking? Just create your overlay (a simple div with a unique id) in your html, style it so that it fills the screen and give it a z-index:1337 CSS attribute so that it covers the entire page. Then, on window.onload:

window.onload = function () {
    // Grab a reference to your overlay element:var overlay = document.getElementById('myOverlay');
    // Check if the overlay really exists// and if it is really appended to the DOM,// because if not - removeChild throws an errorif (overlay && overlay.parentNode && overlay.parentNode.nodeType === 1) {
        // Remove overlay from DOM:
        overlay.parentNode.removeChild(overlay);
        // Now trash it to free some resources:
        overlay = null;
    }
};

Of course, it's not really a preloader, but simply an imitation.

Here's a working fiddle you can play with.

P.S. I personally don't appreciate preloaders, but that's just me...

Solution 2:

Try out this(Remove the document.ready event and simply call this):-

<scripttype="text/javascript">         
            $("body").queryLoader2();
</script>