Automatic refreshing images in php application

Question

I have been writing some rest application in PHP. The application download an image by the REST from the server and return html code to adding the one to the webpage. This is a sample of php code (images.php file):

include 'Camera.php';
include 'Image.php';
include 'httpful.phar';
$c = new Camera();//new  Camera object
$c ->getCameras();//get array of all cameras
$img = new Image(); //new Image object
$n = count(Camera::$cameralist); //lenght of array 

for ($index = 0; $index < $n; $index++) {
echo '<img id="refresh" src="' . $img->getImage($index) . '">'; //show all images
}

The index.php file is the main-page file. It could show image and refresh it by every 5 s. I have done half of work. The picture is showed. But if I want to refresh it using javascript, this refresh only php code not the image which I could see.

<html>
    <head>
        <meta charset="UTF-8">
        <title>Camera Service</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="refresh">  


    </div>
    </body>
    <script type="text/javascript">
  setInterval("moja_funkcja();",5000); 
    function moja_funkcja(){
      $('#refresh').load('images.php');
    }

    </script>
</html>

What change in this code? I would like that it will be working Thanks in advance

How to refresh image not only php script. – Kornelia Kobiela Mar 14 '16 at 00:20 — Kornelia Kobiela, Mar 14 '16 at 00:20

score 3 · Accepted Answer · edited May 23 '17 at 12:07

A possible solution is to fetch all image urls (src attribute) once, and then updating the image urls by appending a timestamp, i.e

<img src="/camera1.jpg">

will become

<img src="/camera1.jpg?t=1457915755"> <img src="/camera1.jpg?t=1457915760">

and so on, the browser will then reload the image. I chose the parameter name "t" arbitrarily, you can name it however you want.

There are better approaches to this using Cache-Control on the server side which delivers the image, check this answer: Refresh image with a new one at the same url

<html>
    <head>
        <meta charset="UTF-8">
        <title>Camera Service</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

        <script type="text/javascript">
          $(function() {
            // load images initially to get the "src" attribute
            $('#refresh').load('images.php', function() {
              // images loaded
              $('#refresh').find('img').each(function() {
                // store original src attribute
                $(this).data('original-src', $(this).attr('src'));
              });

              // every 5 seconds, update the src with a new timestamp
              setInterval(function() {
                $('#refresh').find('img').each(function() {
                  var src = $(this).data('original-src');
                  // if there's already a query string we need to append with &
                  src += (src.indexOf("?") === -1) ? '?' : '&';
                  // our parameter is named "t", this will change with time,
                  // so the browser will reload the image.
                  src += 't=' + new Date().getTime();
                  // update the image src
                  $(this).attr('src', src);
                })
              },5000); 
            }) 
          });
        </script>
    </head>
    <body>
        <div id="refresh"></div> 
    </body>
</html>

If you just need to refresh the content, i.e refetching the PHP script - this becomes much simpler, you just append the timestamp to the URL to the PHP script:

<html>
    <head>
        <meta charset="UTF-8">
        <title>Camera Service</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

        <script type="text/javascript">
          function loadImages() {
            $('#refresh').load('images.php?' + new Date().getTime(), function() {
              // call "recursively" once fetched
              setTimeout(loadImages, 5000);
            }); 
          };

          // trigger first fetch once page is loaded
          $(function() {
            loadImages();
          });
        </script>
    </head>
    <body>
        <div id="refresh"></div> 
    </body>
</html>

A third option, in case you just want to refresh the output of the PHP script is to disable caching on the server and client side, so you don't have to play with the URL:

PHP:

include 'Camera.php';
include 'Image.php';
include 'httpful.phar';

$c = new Camera();//new  Camera object
$c ->getCameras();//get array of all cameras
$img = new Image(); //new Image object
$n = count(Camera::$cameralist); //lenght of array 

// this must happen before you output any content
header("cache-control: no-cache");

for ($index = 0; $index < $n; $index++) {
echo '<img id="refresh" src="' . $img->getImage($index) . '">'; //show all images
}

HTML:

<html>
    <head>
        <meta charset="UTF-8">
        <title>Camera Service</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

        <script type="text/javascript">
          function loadImages() {
            $.ajax({
                url: "images.php",
                cache: false, // disables caching!
                dataType: "html",
                success: function(data) {
                    $("#refresh").html(data);
                    setTimeout(loadImages, 5000);
                }
            });
          };

          // trigger first fetch once page is loaded
          $(function() {
            loadImages();
          });
        </script>
    </head>
    <body>
        <div id="refresh"></div> 
    </body>
</html>

Automatic refreshing images in php application

1 Answers1