PHP Force Refresh Image

PHP force refresh image

Add the modified date to the end of the image as a query.

<img src="/images/photo.png?=1239293"/>

In PHP

<img src="/images/photo.png?=<?php echo filemtime($filename)?>"/>

Automatic refreshing images in php application

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>

How to force browsers refresh image created by imagecreatefromjpeg?

What you do is add a random number generator to the image, you want to be refreshed:

<?php
$rand = mt_rand(11111111,99999999);
?>
<img src="http://<URL>/<dir>/draw.php?<?php print $rand;?>">

This will force the HTML document to refresh the browser address because the string of the image it is calling, has changed due to the random number.

You should also possibly use:

  • PHP clearstatcache(); in your <img> containing page at the top of the page so that every time the page loads it clears its file cache. This would be used if the actual content of the image draw.php is not refreshing properly.

  • There are other various ways (.htaccess, headers, etc.) to also set your server up to force browsers not to cache image files in general (although this could increase your bandwidth significantly)

Force reload image and clearing cache

A standard trick is to append a unique number to the image, as shown. You can use Javascript or PHP or some other tool to create a random number each time the DOM or page is loaded.

<script type='text/javascript'>
    function refresh() {   
        var rand = Math.floor(Math.random() * 10000)
        document.getElementById("imgId").src="CAM2.png?" + rand;
    }
</script>

<body>   
    <p style="text-align:center;">
        <A HREF="#" onclick='refresh()'>Click to refresh the page</A>
        <img src="CAM2.png" id='imgId' alt="Camera 2" width="100%">
    </p>
</body>

What the above script does:

First generates a random number.
Updates the unique img tag (with the id) with the image source (src) and the appended unique number. Number changes each time the anchor is clicked.

Example

For the purposes of illustration; the example below changes the image url as well as the src string. I have also done some minor HTML tidying up.

    function refresh() {   
        var rand = Math.floor(Math.random() * 10000);
        var exampleOnly = Math.floor(Math.random() * 200);
        document.getElementById("imgId").src="https://picsum.photos/id/"+exampleOnly+"/500/300?" + rand;
    }
<body>   
    <p style="text-align:center;">
        <A HREF="#" onclick='refresh()'>Click to refresh the page</A></p>
<p style="text-align:center;"> <img src="https://picsum.photos/id/21/500/300" id='imgId' alt="Camera 2" >
    </p>
</body>

Refresh php with jquery and reload image

You may have a browser caching issue. One solution is to append a timestamp to the URL to ensure the latest version is fetched. Either that or set server-side headers to not cache. For the former solution, you can try this:

function refresh_div() {
    var d = new Date().getTime();
    jQuery.ajax({
        url:'oggi1ora.php?ts=' + d,
        type:'POST',
        // rest of your code

For the latter, you can set headers like this:

<?php
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Next, jQuery(".result").html(results) is probably not doing anything since there is no element with class "result" in your markup.

Instead, ignore the result and force the image to refresh like so:

function refresh_div() {
    var d = new Date().getTime();
    jQuery.ajax({
        url:'oggi1ora.php?ts=' + d,
        type:'POST',
        success:function(results) {
            $("#oggi1ora").attr("src", "grafici/oggi1ora.png?ts=" + d);
        }
    });
}

Update: If you want to call /usr/local/bin/oggi1ora.php every 5 seconds too, then either include '/usr/local/bin/oggi1ora.php' (or however your directory structure is set) or add exec('php -q /usr/local/bin/oggi1ora.php') in your web-facing /var/www/oggi1ora.php script.

What is the best way to force an image refresh on a webpage?

This is a trick, but it works.

Put a variable and random number in the image url. Something like: 

<img src="photo.jpg?xxx=987878787">

Maybe there's a better way, but it works for me.

how can force browser to recache image

the easiest and the simplest way to do this by get file modified time and but it after image url so every time user upload new image the browser recache the image .

<?php
$lm=filemtime('main_cover.jpg');
echo '<img src="main_cover.jpg?'.$lm.'" alt="'.$username.'" >';
?>

How can I make an image refresh everytime it is called on a page

Try adding something to the end of the file reference, like this:

<img src='http://bannerpillar.com/u/viraladmin.jpg?<?=rand(11111,99999)?>'>

The browser will think each image is unique and load each one separately rather than using the image from cache.


Related Topics

Import Class Conditionally with the Keyword 'Use'

Strpos() with Multiple Needles

How to Inject a Service in Another Service in Symfony

Share Session Between Two Websites

How to Get the Image Type in PHP

Laravel 5: Sending Email

How to Force Utf-8 Encoding in Browser

Protect the Excel File Using PHPexcel

Set Woocommerce Cart Expiration

Get a Single Row from the Database Using Ajax in Codeigniter

PHP Subtract Array Values

Php: How to Add Leading Zeros/Zero Padding to Float via Sprintf()

$_Post for Disabled Select

Parsing Extremely Large Xml Files in PHP

Nohup on Windows, Exec Without Waiting for Finish

How to Use Bind_Param for Order By

How to Store a Class Instance in a $_Session Space

How to Fetch Account Data from a Provider with Lightopenid


Leave a reply



Submit