Question

As I talk about befor I’m using to jQuery to refresh / update a webcam image.
This works just fine if you wanna update the image every 5th or 10sec.
But when your gonna do a stream with 10-15fps it gets into problems with most browsers
it seems. The problem seem to be that it sends a request befor the first one was done.
Is there a way to wait for the first request to be done befor sending a new update request for the webcam image? Because to me it seems to stack up requests if there is alittle delay on the server with the image.

Sorry if I did explain it alittle bad but… I’m norwegian and blode. Not the best combination. 🙂

Webcam Image is a single url
ex. http://www.ohoynothere.com/image.jpg

Old code I use.

     $(document).ready(function() {
        setInterval('updateCamera()',3000);
});

function updateCamera() {
    $('.online2').each(function() {
        var url = $(this).attr('src').split('&')[0];
        $(this).attr('src', url + '&rand=' + new Date().getTime());
    })
}

Answer 1

Definitely!

It sounds like your best bet would be to use the jQuery.ajax() method ( http://api.jquery.com/jQuery.ajax/ ) or .get() method to chain your requests. Basically, you want a JavaScript function that does a request for the image using the .ajax() call. In the response handler, simply call the function again:

function getMyImage() {
  jQuery.get(image_url, function(response) {
    jQuery('#img-name').attr('src', response);
    getMyImage();
  });
}

Whenever getMyImage successfully returns the image’s src value from the webcam, it will immediately go out and try to retrieve a new image, but not before the previous one is loaded.

If I haven’t understood what you’re trying to do, please let me know. It would be helpful to know more about how the webcam image is retrieved (i.e. is it the same image src returned every time, etc.).