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.

I don't know how can I do it... The right would be a
before ? — jcsantos, Jan 24 '14 at 01:46
Possible duplicate of [Refresh image with a new one at the same url](https://stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url) — Jon Onstott, Aug 10 '17 at 17:57

score 21 · Answer 1 · edited May 23 '17 at 12:02

21

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.

edited May 23 '17 at 12:02

Community

1
1

answered Jan 24 '14 at 01:47

Kevin

708
2
9
20

Thanks, you saved me hours of debugging. – B. Okba Oct 26 '22 at 11:52

Felix · Accepted Answer · 2014-01-24T01:55:37.300

15

Change your img tag to this:

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

Then you can use below code to change your image source on click of a button, anchor or whatever:

document.getElementById("badge").src="new image src here";

You can use jQuery as well:

$("#badge").attr("src", "new image src here");

edited Jan 24 '14 at 01:55

answered Jan 24 '14 at 01:48

Felix

37,892
8
43
55

8

what if the image is going to use the same src and the server will provide another image – SDIDSA Aug 30 '19 at 17:14

score 9 · Answer 3 · answered Jan 10 '17 at 11:15

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'

I like this, but if you want this in a page that reloads only parts it needs to be `img.src = img.src.split("?")[0] + "?" + dt.getTime();` — Dolphin, Oct 02 '17 at 12:24

score 1 · Answer 4 · edited Nov 14 '17 at 07:10

1

For AngularJs, we can add directly in html file like this:

Html:

<div ng-controller="MyCtrl1"><div ng-repeat="img in images"> <img ng-src="{{img.image}}?_={{generatingNewDate}}"></div></div>

Ctrl: $scope.generatingNewDate = new Date().getTime();

You can have a look at this : https://jsfiddle.net/k614L8tt/

edited Nov 14 '17 at 07:10

divy3993

5,732
2
28
41

answered Nov 14 '17 at 06:09

yaqub

63
2
9

1

This has nothing to do with the original question. – Derek Brown Nov 14 '17 at 06:41

score 0 · Answer 5 · answered Jan 24 '14 at 01:47

0

Why do you need to do this?

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

when you may do this

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

answered Jan 24 '14 at 01:47

this should be a comment instead of an answer – Daniel Wu Jul 22 '20 at 03:47

Reload image without refreshing the page

5 Answers5

Linked