2

I have this Menu list

<ul class="nav navbar-nav" style="width:80px;">
   <li class="dropdown">
      <a href="#" class="dropdown-toggle">Profile</a>
         <ul class="dropdown-menu">
            <li id="profile"><a href="#">My Profile</a></li>
            <li id="drive"><a href="#">My Drive</a></li>
          </ul>
    </li>
</ul>

which i call profile.php and drive.php with this:

$(document).ready(function(){
    $("#profile").click(function(){
        $("#box").load("/functions/profile.php");
    });    
    $("#drive").click(function(){
        $("#box").load("/functions/drive.php");
    }); 
});

into this <div id="box"></div> and it works great :).

But there is a problem because profile.php page has a large image and takes time to load. Therefore, i want to show a laoding.gif image into <div id="box"></div> while profile.php page loading in it, and when profile.php loaded completed then the loading.gif image should be hidden and the profile.php page should be visible in <div id="box"></div>.

Thanks in advance.

I am a student, so it is a bit difficult for me to solve it.

P.S. I search google a lot but none worked.

qais ali
  • 77
  • 9
  • You could show your loading image before you call `.load()` and use the *complete-callback* of `.load()` to hide the image. See http://api.jquery.com/load/ for the API. – Mike Scotty Oct 05 '16 at 15:16
  • 1
    Possible duplicate of [Show loading gif while image is loading](http://stackoverflow.com/questions/29742508/show-loading-gif-while-image-is-loading) – sam rodrigues Oct 05 '16 at 15:18
  • Dear @mpf82 can you please guide me how to fix it. – qais ali Oct 05 '16 at 17:43
  • Dear @samrodrigues it is not the answer i am looking for sorry. If think that it is then do provide me a clue. Thanks – qais ali Oct 05 '16 at 17:51

1 Answers1

0

You can try something like this:

$("#box").html("<img src='laoding.gif' />").load("/functions/profile.php");

This will change the html from the #box element until the load function finishes and replaces again the content.

Working example.

Andrici Cezar
  • 603
  • 1
  • 9
  • 15
  • Thanks for your comment. I tried on my file but no luck. Please do check in Jsfiddle. Thanks. :) – qais ali Oct 06 '16 at 13:28
  • Maybe you get a different error. There are any errors in the console? – Andrici Cezar Oct 06 '16 at 13:40
  • This is what I have Same in my php file. https://jsfiddle.net/wLmshtdm/3/ – qais ali Oct 06 '16 at 14:21
  • @qaisali could you provide a little more of the html structure – sam rodrigues Oct 06 '16 at 14:29
  • You can't load codepen or google because you'll get No 'Access-Control-Allow-Origin' header is present on the requested resource. [Read here about it](http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource). – Andrici Cezar Oct 06 '16 at 14:33