N
Nahka-Sakke
Hello,
I try to preload some dynamically generated images from a webcam and
four measurement devices (I get graphs from the devices). The idea is
to create an array once in 1 sec. with images and use their onload
event to change their respective picture in the HTML document (I reason
it will be cached so it won't get loaded again when the respective
document picture's src is set). In the HTML document there are five
pictures with names pic1.jpg, pic2.jpg and so on.
The code works most of the time OK, but sometimes I get the red 'X'
instead of the webcam picture. The graphs seem to come always OK. Is my
reasoning correct about caching images this way? The webcam or the
devices could be writing the pictures on the server's hard disk when
the page refreshes but to me it seems this should be taken care of by
the script. It should only change pics when it gets the picture
succesfully even though the refresh rate changes.
Thanks!
var url = "http://some.url.com/";
var pageImages = new
Array("pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg","pic5.jpg");
var preloadedImages = new Array(5);
function imagepreLoader(){
var j;
for (j=0; j < pageImages.length; j++){
preloadedImages[j] = new Image();
preloadedImages[j].name = pageImages[j];
preloadedImages[j].onload = loadOK;
preloadedImages[j].src = url + pageImages[j] + "?" + Math.random();
}
setTimeout("imagepreLoader()",1000);
}
function loadOK(){
document.images[this.name].src = this.src;
}
<body onload="imagepreLoader()">
..
..
<img border="0" src="..." name="pic1.jpg">
<img border="0" src="..." name="pic2.jpg">
..
..
</body>
I try to preload some dynamically generated images from a webcam and
four measurement devices (I get graphs from the devices). The idea is
to create an array once in 1 sec. with images and use their onload
event to change their respective picture in the HTML document (I reason
it will be cached so it won't get loaded again when the respective
document picture's src is set). In the HTML document there are five
pictures with names pic1.jpg, pic2.jpg and so on.
The code works most of the time OK, but sometimes I get the red 'X'
instead of the webcam picture. The graphs seem to come always OK. Is my
reasoning correct about caching images this way? The webcam or the
devices could be writing the pictures on the server's hard disk when
the page refreshes but to me it seems this should be taken care of by
the script. It should only change pics when it gets the picture
succesfully even though the refresh rate changes.
Thanks!
var url = "http://some.url.com/";
var pageImages = new
Array("pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg","pic5.jpg");
var preloadedImages = new Array(5);
function imagepreLoader(){
var j;
for (j=0; j < pageImages.length; j++){
preloadedImages[j] = new Image();
preloadedImages[j].name = pageImages[j];
preloadedImages[j].onload = loadOK;
preloadedImages[j].src = url + pageImages[j] + "?" + Math.random();
}
setTimeout("imagepreLoader()",1000);
}
function loadOK(){
document.images[this.name].src = this.src;
}
<body onload="imagepreLoader()">
..
..
<img border="0" src="..." name="pic1.jpg">
<img border="0" src="..." name="pic2.jpg">
..
..
</body>