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

Question

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>

Can you show how did you apply the CSS and the actual jquery click event in your html? — imprezzeb, Mar 13 '17 at 04:39
I did't add applied css and jquery to my html.I thought jquery will do it since I am applying to all 'a' i.e. links. — user7587888, Mar 13 '17 at 04:47
Your jquery above will show all elements with class="se-pre-con" applied when an anchor is clicked. If you want your image to be displayed once anchor is clicked you need to add class="se-pre-con". — imprezzeb, Mar 13 '17 at 04:49
This will display the link with TEST text if that is the case. — imprezzeb, Mar 13 '17 at 05:00

imprezzeb · Accepted Answer · 2017-03-13T05:21:36.080

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>

edited Mar 13 '17 at 05:21

answered Mar 13 '17 at 04:54

imprezzeb

706
1
7
18

so should I remove image url from css? – user7587888 Mar 13 '17 at 04:55
Where did you apply the "se-pre-con" class? Is it in DIV? – imprezzeb Mar 13 '17 at 04:57
I tried applying class as edited in question area because you said class needs to be applied in comment section.But now I am trying to apply how you have submitted in answer section. – user7587888 Mar 13 '17 at 05:01
Please confirm your use case is that you have an image that is currently hidden, when user clicks a link it will show right? – imprezzeb Mar 13 '17 at 05:04
What I want is when a user clicks on any link on my page I want to display a loading gif till the clicked link is displayed. – user7587888 Mar 13 '17 at 05:07
Apply the "se-pre-con" to the image tag you want to display not to the anchor itself. Please see updated example above. – imprezzeb Mar 13 '17 at 05:12
I tried what you said but it does not displays my gif image till the page is loaded.Are you sure your code is right? – user7587888 Mar 13 '17 at 05:19
Sorry my bad, put the script tag at the bottom before the closing
tag. Please see updated code above.
– imprezzeb Mar 13 '17 at 05:22
It is not working, I tried your updated code.Image is not being displayed. – user7587888 Mar 13 '17 at 05:30
It is working in my end. One last question, did you add your CSS file where .se-pre-con is located in your html file? Or can you please show your code snippet for html. – imprezzeb Mar 13 '17 at 05:33
Can you please tell me about your code here on jsfiddle https://jsfiddle.net/#&togetherjs=NvpbhflGGi – user7587888 Mar 13 '17 at 05:40
please join the session and help me out – user7587888 Mar 13 '17 at 05:43

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

1 Answers1