CODEWITHSUNDEEP
javascriptjquery
DextrousDave
DextrousDave

Reputation: 6793

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 0%-100% bar displays quickly, after that it reloads my page again. So it does not show the progress bar BEFORE the page loads and it loads the page a second time as well.

Here is my implementation code:

<head>
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.queryloader2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("body").queryLoader2();
        });
    </script>
</head>
<body>
    My content...No other reference in here for the Jquery preloader
</body>

Thanks for any help in advance.

Upvotes: 1

Views: 4843

Answers (2)

Oleg
Oleg

Reputation: 9359

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 error
    if (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...

Upvotes: 3

Aditya Singh
Aditya Singh

Reputation: 9612

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

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

Upvotes: 1

Related Questions