Gif image is not displaying sometimes but alt text is displaying?

Question

during page transition am using gif image to represent as 'loader' .But first 2 or 3 navigation i can see the image and rest of the transition instead of image am only able to see the "alt" text i have give with blank imagebox.

I think the image is not loading,please check my code

<div id="loadinggif" class="overlay"  align="center" style="display:none;">
<img src="img/gif.gif" alt="loader" height="50" width="50">
</div>

and when i click one page navigation am using following code

$('#loadinggif').css('display','block');

Please check my screen shots first one is working perfectly ,second screnshots showing the exact problem am facing now.

Answer 1

Are your 'pages' in the same file/location? Make sure the relative path to your image is correct everywhere you use it.

Another thing would be to clear your browser cache.

If you still cannot get it to work, I would suggest inspecting it when it doesn't load, and looking at the browser's console. Depends on the browser, but most you can right click the image then 'inspect element', or something very similar.

Answer 2

Try to fully qualify the image. Such as https://mywebsite.com/img/spinner.gif . Now, if that fails, do not give up on life, there is still hope! What I normally do, is have a div with a css/Less class that has the image in it. That way, the image is loading through the dom, and to hide n show, simply hide n show the dom element with that specific class.

Let me know if that works.

Cheers M8.