Not able to load a gif when user clicks on a link

css code:-

.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('UrlToTheImage') center no-repeat #fff;

jquery code:-

$('a').click(function(){
  $(".se-pre-con").show();
}

In my html I have many links.So whenever someone clicks on the link I want to display a gif image till the clicked link is loaded.There is no problem in displaying the gif without jquery i.e. when i just normally display that gif in my html,it gets displayed.But I want to display it only when a link is clicked.Ant btw I am using these two cdn:-

<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>

my html code:

<a  class="se-pre-con" href="LINKURL" >TEST</a></h4>

Answers 1

  • Here are the example.

    <html>
    
     <body>
       <a href="">Show image</a>
       <img src="..." class="se-pre-con" style="display:none" />
       <script>
        $('a').click(function(){          
          $(".se-pre-con").show();
        }
       </script>
     </body>
    </html>
    

Related Articles