CODEWITHSUNDEEP
javascript
carny666
carny666

Reputation: 2430

Problem reloading image source in Javascript

I have a camera system ftping image files to a web server every few seconds. I have a web page that uses javascript to reload the source an image tag.

Periodically the web page displays only a portion of the image. I believe this is because the transfer has not completed when the web page request a reload.

Here is my code:

<html>
    <head>
        <script language="javascript" type="text/javascript">
            var t = setTimeout("reloadImgs()", 10);

            function reloadImgs() {
                reloadImg("kobmimg");
                reloadImg("eafimg");
                t = setTimeout("reloadImgs()", 5000);               
            }

            function reloadImg(id) {

                var obj = document.getElementById(id);
                var src = obj.src;
                var pos = src.indexOf('?');
                if (pos >= 0) {
                    src = src.substr(0, pos);
                }
                var date = new Date();
                obj.src = src + '?v=' + date.getTime();

                return false;
            }       
        </script>
    </head>
    <body>
        <img src="eaf_camera_image.jpg" id="eafimg" width="350px" />
        <img src="kobm_camera_image.jpg" id="kobmimg" width="350px" />
    </body>
</html>

Any solutions would be appreciated.

Upvotes: 0

Views: 231

Answers (4)

Jose Faeti
Jose Faeti

Reputation: 12294

I think the image has not been fully loaded to the server when you change the source and the browser requires the new image.

You should make the image available to the browser only when it's been fully loaded.

This means the script on your server should upload the image on a separated folder, or perhaps with a different name, then when it's fully loaded (and you could know this by updating a database field for example), you copy the image to the folder where your script can download it.

You should also inform your script if the image is available or not by sending a request first and check what is the response. Otherwise, since your script is adding a different variable every time to avoid cache, you will end up downloading the image even if it's the same image you have now.

Camera -> Upload image -> Image fully uploaded? -> Update database entry

Browser request image -> Server check -> Available? -> Download image

Upvotes: 2

haynar
haynar

Reputation: 6030

maybe your camera system is ftping images incorrectly, otherwise how large are images and how slow is your connection that you have this issue... Anyway I can suggest a solution, that would help in my opinion.

try using jQuery to do this:
$('#eafimg').load(function(){
    setTimeout('reloadImg ("eafimg")', 5000) ;
}
$('#kobmimg').load(function(){
    setTimeout('reloadImg ("kobmimg")', 5000) ;
}

Upvotes: 0

Mike K.
Mike K.

Reputation: 3789

You could ftp the images to a folder that is not your live folder, then use a cron job to move images into the serving folder. Your reloadImgs method could do a time check to make sure you're not in the cron window, if it were it could skip that reload cycle and wait again.

Upvotes: 0

Piskvor left the building
Piskvor left the building

Reputation: 92762

Your assessment looks probable to me: the web page is loading an image that's only partially uploaded. You have multiple options:

  • configure your FTP server to keep the files in a temp location until upload is finished (not sure if all FTP servers support this)
  • if the camera supports some sort of callback on upload complete (few do), use that to trigger the copy, show the older image until then
  • if none of that is an option, configure your camera to upload the files to a different location than the webserver's document root, and run a script that periodically copies the files to the final location (e.g. from one directory on the webserver to another)

Upvotes: 2

Related Questions