load - How to refresh only a image of a whole page, when the imagename is variabel? -
this puzzle i'm struggeling with:
i have website amount of images, , i'd images refreshed each 20 seconds,
this code wrote far that:
<img src="imgcam/mostasquare_1.jpg" border="1" name="refresh" id="img1"> <img src="imgcam/mriehelbypass_1.jpg" border="1" name="refresh" id="img2"> <script language="javascript" type="text/javascript"> var t = 35 // interval in seconds images = new array('../imgcam/mostasquare_1.jpg','../imgcam/mriehelbypass_1.jpg'); //urls of images function start() { tmp = new date(); tmp = "?"+tmp.gettime(); (i=1;i<image.length;i++){ document.getelementbyid("img"+i).src = images[i]+tmp; } settimeout("start()", t*1000) } start(); </script>
and solely works great, but, here catch:
i force browser refresh/download images when opening page.
so therefor appended querystring random number (or time, or version, etc).
so resulted in:
<img src="mostasquare_1.jpg80123123" alt="image1" />
however, because added random number, array has got wrong values
how can tackle specific "catch22" problem?
bonus points: i'd show little text on top of image(s) (floating css or so?) shows when last refresh of image took place.
here can find example using jquery: http://codepen.io/anon/pen/wagbqg
you can keep original path inside data-attribute , update src starting in way:
$this.attr("src", $this.attr("data-original-image") + "?" + d.gettime());
Comments
Post a Comment