Using AJAX / jQuery to refresh an image --> image_feed.php code?

Question

I'm trying to work through a question previously asked on stckoverflow - "Using AJAX / jQuery to refresh an image"

The URL from image_feed.php is supposed to change everytime. However, I can't figure out what the code for image_feed.php should be (even an example). Can anyone help?

FYI, my index.php is:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
    var $img = $('#image1');
    setInterval(function() {
        $.get('image_feed.php?CAMERA_URI=<?=$camera_uri;?>', function(data) {
            var $loader = $(document.createElement('img'));
            $loader.one('load', function() {
                $img.attr('src', $loader.attr('src'));
            });
            $loader.attr('src', data);
            if($loader.complete) {
                $loader.trigger('load');
            }
        });
    }, 5000);
});
</script>
</head>
<body>

<div id="image1">
</div>
</body>

$loader.one('load', function() should be $loader.on('load', func — DevZer0
– DevZer0, Commented Jul 15, 2013 at 6:16

xdazz · Accepted Answer · 2013-07-15 06:15:51Z

1

The image_feed.php should just return the image's src as the response.

<?php
// produce the src with your logic.
$src = "https://www.gravatar.com/avatar/daa6ae7c970d99c6c2b3a9d8895aaa1e?s=32&d=identicon&r=PG";
echo $src;

answered Jul 15, 2013 at 6:15

xdazz

161k38 gold badges255 silver badges278 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2582376 Over a year ago

This was what I was originally looking for. Thanks!

Stanislav Terletskyi · Accepted Answer · 2013-07-15 06:32:26Z

0

Try this:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function() {
                var $img = $('#image1');
                setInterval(function() {
                    $img.attr('src', 'image_feed.php?CAMERA_URI=<?=$camera_uri;?>');
                }, 5000);
            });
        </script>   
    </head>
    <body>
        <img id="image1" src="image_feed.php?CAMERA_URI=<?=$camera_uri;?>">
    </body>
</html>

answered Jul 15, 2013 at 6:32

Stanislav Terletskyi

2,13221 silver badges17 bronze badges

1 Comment

user2582376 Over a year ago

This helped as what I had originally wasn't right. Thank you.

bystwn22 · Accepted Answer · 2013-07-15 07:02:38Z

0

Try this

$(function() {
  var $img = $('#image1');
  var loading = false;
  setInterval(function() {
    if ( loading === true ) {
      return;
    }
    loading = true;
    var image = new Image;
    image.src = <?php echo json_encode( "image_feed.php?CAMERA_URI=".urlencode( $camera_uri ) ); ?>;
    image.onload  = function() {
      loading = false;
      $img.attr("src",this.src);
    };
    image.onerror = function() {
      loading = false;
      // do something here
    };
  }, 5000);
});

answered Jul 15, 2013 at 7:02

bystwn22

1,7941 gold badge10 silver badges9 bronze badges

Collectives™ on Stack Overflow

Using AJAX / jQuery to refresh an image --> image_feed.php code?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related