change image with javascript

Question

I have an image 'view more' that when I click on more data is appended, what I want to do is change image before data is appended, I've tried multiple solution found on internet but nothig seems to work. Here is my code

<script language="Javascript">
     function openFromButton(lastLoadedIndex) {
      lastLoadedIndex = (typeof(lastLoadedIndex)=='undefined') ? '' : lastLoadedIndex;
     jQuery.get('liste_ti.asp?from_item='+ lastLoadedIndex +'&param='+(new                  Date()).getTime(), function(data) { 
//alert(data);

      jQuery("#liste").append(data);

       });



        }


    </script>

and my image

 <div class="lazyLoading"><a href="#"> <img src="images/view_more_arrow.png" border="0" height="6" width="11"></a> <a href="javascript:openFromButton()">view more</a></div></td>

And this is the image I want to dispplay on click <div class="lazyLoading"><img src="images/loader.gif"></div></td> — Nourhene
– Nourhene, Commented Sep 9, 2014 at 9:36
do you want the image to be aplayed before the text is appended or after ? — Youness
– Youness, Commented Sep 9, 2014 at 9:43
i updated my answer now you know where to put your image if you want it tobe show before or/and after the extra text is appended — Youness
– Youness, Commented Sep 9, 2014 at 9:46

Youness · Accepted Answer · 2014-09-09 09:46:09Z

1

try this :

give your img an ID like this :

<div class="lazyLoading"><a href="#"> <img id="yourid" src="images/view_more_arrow.png" border="0" height="6" width="11"></a> <a href="javascript:openFromButton()">view more</a></div></td>

now change your code to this :

<script language="Javascript">
     function openFromButton(lastLoadedIndex) {
      lastLoadedIndex = (typeof(lastLoadedIndex)=='undefined') ? '' : lastLoadedIndex;
         //change it here if you want to put a loading  img. 
         // jQuery("#yourid").attr('src','your/loading/img/url');
 jQuery.get('liste_ti.asp?from_item='+ lastLoadedIndex +'&param='+(new                  Date()).getTime(), function(data) { 
//alert(data);

      jQuery("#liste").append(data);
       //change it here to be shown after the text is appended (loading finished ;) )
      jQuery("#yourid").attr('src','your/img/url');
       });



        }


    </script>

edited Sep 9, 2014 at 9:46

answered Sep 9, 2014 at 9:38

Youness

1,4951 gold badge9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pbk1303 · Accepted Answer · 2014-09-09 14:26:18Z

0

If you are using jQuery then use .load() method. This will append the content after the images have loaded.

edited Sep 9, 2014 at 14:26

Pbk1303

3,7823 gold badges34 silver badges47 bronze badges

answered Sep 9, 2014 at 9:48

danielg44k

554 bronze badges

Collectives™ on Stack Overflow

change image with javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related