Reload image without refreshing the page

Question

Javascript:

function atualiza() {
  document.getElementById('badge').innerHTML = location.reload();
}

I know the "location.reload()" will refresh the page...

HTML:

<img id="badge" src="<?php echo $cms_url; ?>/imaging/badge.php?badge=$mygroup['badge']; ?>" />

I need to freshed the src="" or <img /> without refreshing the page.

Answer 1

See this: Updating a picture without page reload

document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();

anyways, this was copied off that thread and apparently it should reload the image.

Answer 2

Maybe the javascript i wrote is usefull for someone who reads this question. it ads a timestamp to every image to break the browser cache:

<script type="text/javascript">  

    function replaceSrc()
    {

        var images = document.getElementsByTagName('img');

        for(var i = 0; i < images.length; i++)
        {
            var dt = new Date();
            var img = images[i];

            if(img.src.length >= 0 & img.id != 'idImageNoTimestamp')
            {
                img.src = img.src + "?" + dt.getTime();
                //javascript:alert(document.lastModified);
            }
        }
    }
    replaceSrc();
      </script>

you can exclude some images by using the id attribute. I used it to exclude Google static maps images. if you don't need it, remove:

 & img.id != 'idImageNoTimestamp'