CODEWITHSUNDEEP
javascript
anmml
anmml

Reputation: 263

How to reload images by class name - Javascript or Jquery

How can I reload images that have a same class name ?

I tried this but it doesn't refresh the images:

<img class="refresh" src="http://www.w3schools.com/jsref/bulbon.gif"></img>
<img class="refresh" src="http://www.w3schools.com/images/colorpicker.png"></img>

// javascript: //
a=document.getElementsByClassName(refresh);
for(var c=0;c<a.length;c++)a[c].src=a[c].src;

Hope the question is clear

Upvotes: 0

Views: 525

Answers (2)

Javier Rey
Javier Rey

Reputation: 1620

Maybe:

var a = document.getElementsByClassName('refresh');
for (var c = 0; c < a.length; c++) {
    var n = a[c].src.indexOf("?"); if (n == -1) {n = a[c].src.length;}
    a[c].src = a[c].src.substring(0, n)+"?n="+Date.now();
}

Upvotes: 0

0xdw
0xdw

Reputation: 3842

You can refresh your image by replacing the src with url parameter like this.

window.onload = function() {
  setInterval(function() {
    var imgs = document.querySelectorAll('.refresh');
    if (imgs) {

      for (var i = 0, length = imgs.length; i < length; i++) {
        var pt = /\?v=.+/g;
        if (imgs[i].src) {
          pt.test(imgs[i].src) 
          ? imgs[i].src = imgs[i].src.replace(pt, "?v=" + Date.now()) 
          : imgs[i].src = imgs[i].src + "?v=" + Date.now();
        }
      }

    }
  }, 1000 * 60 * 5);

};
<img class="refresh" src="http://www.w3schools.com/jsref/bulbon.gif"></img>
<img class="refresh" src="http://www.w3schools.com/images/colorpicker.png"></img>

Upvotes: 1

Related Questions