0

To properly display a "loading" image in my application, I made the following script:

var spinnerVisible = false;

function ShowProgress() {
    if (!spinnerVisible) {
        $('div#layer').fadeIn("fast");
        $('div#spinner').fadeIn("fast");
        spinnerVisible = true;

        var spinner = $('#spinner');

        spinner.html('<span>Loading, please wait...</span><img src="/Content/ajax-loader.gif" width="250" height="250"/>').css('background', '#fff').show();
    }
}

The ajax-loader.gif image is loading fine in internet explorer and Chrome, but it does not load in Firefox?

EDIT

I have obtained the url of the image, which goes like this:

http://localhost:63779/Content/ajax-loader.gif

If I copy-paste the url in firefox, the gif is loading, but now when the function is called...?

EDIT 2

I don't know if it is related, but I have found this:

jQuery html() in Firefox (uses .innerHTML) ignores DOM changes<

Maybe it is related to my problem?

EDIT 3

Ok, so something strange happened, which I don't really like, but here goes:

Firs I have tried this:

    var element = document.getElementById('spinner');

    element.setAttribute("'<span>Loading, please wait...</span><img src=\"/Content/ajax-loader.gif\" width=\"250\" height=\"250\" background=\"#fff\"/>')", element.innerHTML);

    alert(document.getElementById("spinner").innerHTML);

As I tested in firefox it gave me an error saying that there were illegal characters in my string. So I put the element.setAttribute line in comments and I got the proper alert... And the gif showed!

But that's not all: sometimes it plays, sometimes it does not. I'm slightly confused right now, I don't understand why.

Community
  • 1
  • 1
hsim
  • 2,000
  • 6
  • 33
  • 69
  • checked the console? - What does your function call look like? – newBee Oct 10 '14 at 18:44
  • I do now know how to use Firefox's console. – hsim Oct 10 '14 at 18:45
  • Hit F12 - this will open Developer Tools in Chrome, Firefox and even IE. After opening them you usually should reload the page. – newBee Oct 10 '14 at 18:47
  • Ok, managed to open the console, it remains empty. – hsim Oct 10 '14 at 18:48
  • Try to find your image in the DOM/HTML-Inspector and check if it' there and the proper CSS-Styles are applied. However to make it easier for us you could try to create a JS-Fiddle or provide more information in general. – newBee Oct 10 '14 at 18:50
  • can you try to insert a console.log in your function to see if it is actually called (at the end of the function) – Kaiido Oct 10 '14 at 19:03
  • Done as you ask @Kaiido and the console.log does log, so the function is called – hsim Oct 10 '14 at 19:06
  • 1
    For your third edit, there are a few issues : you added one parenthesis that shouldn't be there ; you don't need to add all those anti-slashes (`\"`) if you just get the string between single quotes (`'`) ; and [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML) is a property of the DOM element, you should set it like that : `element.innerHTML = 'Loading, please wait...';` – Kaiido Oct 10 '14 at 19:26
  • 1
    And for your main issue, could you try with a web hosted file (i.e `http://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif`) – Kaiido Oct 10 '14 at 19:29

0 Answers0