Home/ Questions/Q 886241
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T13:02:10+00:00

I want to load picture from web server without refreshing the page. I have

  • 0

I want to load picture from web server without refreshing the page.
I have simple page:

<body><h1>Test</h1>
      <div id="mydiv">
         <img src="animals.jpg"/>
      </div>
</body>
</html>

the point is that animals.jpg content changes (i.e now animals.jpg can be picture of wolf but after minute it will be changed to a cat) however the name(animal.jpg) stays ( server overwrites the image content only )
so what i want is when i click on the picture it will re-load it from the server.

what i did so far (actually it’s made of pieces of examples i found 🙂 ):

    $(document).ready(function(){
        $('#mydiv').click(function(){
        //$('#mydiv').load("animals.jpg") // loads text instead of image
        //$("#mydiv").append("<img src='animals.jpg'/>"); // appends old picture
        //$("#mydiv").html("<img src='animals.jpg'/>") // not responds at all
    }); 
})

not working, see the comments.

Though I can load html’s:
loadme.html:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"/></script>
<script type="text/javascript">
   $(document).ready(function(){
     $('#mydiv').click(function(){
     $('#mydiv').load("h1.html")
   }); 
 })


</script>

</head>

<body><h1>Test</h1>
<div id="mydiv">
load me!
</div>
</body>
</html>

h1.html:

Text

now when i change h1.html ‘text’ on something else and i click on ‘load me!’ in load.html it will updated content always.
That’s what i want to achieve with images :/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to change the image’s src attribute to get it to reload. As the src is supposed to stay the same, append a random string to the end of it. This’ll make the browser think it’s a new image.

    $('#mydif>img').attr('src', 'animals.jpg?random=' + Math.random());
    • 0