Loading image doesn't appear after page refresh

Question

Here's the problem; I've got a 'loading' image -- it's just the standard spinner.gif animation that is normally used to indicate that something is going on behind the scenes. Here's the code:

    $(document).ready(function() {
        var spinner = $('<img />').attr('src', '/media/images/icons/spinner.gif');
        var loadingText = $('<span id="loader">Loading...</span>').prepend(spinner);
        $(loadingText).appendTo('#messages');

[... other jquery code here ...]

After other functions complete, the following removes the loading image and text:

        $(loadingText).remove();

The problem is that whenever you click 'refresh' within your browser, the loading text appears again, as it should, but the image doesn't show up. Only upon closing the tab or window and reopening the page will the image appear correctly with the loading text. I'm stumped, any ideas? (thanks in advance)

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

Seems to work fine for me in Chrome, Firefox, and Opera (sorry on a Mac so no IE). Have you tried it in multiple browsers?

I am just doing:

<html>
<body>
    <div id="messages">

    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        // use some random spinner from the internet
        var spinner = $('<img />').attr('src', 'http://www.enilivewec.com/img/ajax-loading.gif');
        var loadingText = $('<span id="loader">Loading...</span>').prepend(spinner);

        // add to #messages div block
        $(loadingText).appendTo('#messages');

        // do some animations to delay it a bit then remove it
        $('#messages').slideUp(500).slideDown(1000).fadeOut(500).fadeIn(1000, function () {
            $(loadingText).remove();
        }); 

    })
  </script>
</body>

Edit: The OP stated that using window load corrected the problem since it waits until after all images are loaded and then starts the jQuery code.

edited May 23 '17 at 12:04

Community

1
1

answered Feb 04 '11 at 19:00

iwasrobbed

46,496
21
150
195

Did you try my code or your code? When it comes to bugs, always try to create the simplest test case possible to rule out unrelated items. If you try my code and it works, then something is fishy with yours. – iwasrobbed Feb 07 '11 at 05:59
Yeah, the odd thing is that I tried both your code and mine on the latest version of Firefox and it works just fine. Oh well; when I figure it out I'll post the solution :-) Thanks! – musashiXXX Feb 07 '11 at 12:39
[This](http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-something/545005#545005) fixed the issue. – musashiXXX Feb 07 '11 at 13:09
Ahhhh... good catch on window load! Glad you figured it out :) – iwasrobbed Feb 07 '11 at 14:13

Loading image doesn't appear after page refresh

1 Answers1