CODEWITHSUNDEEP
htmlcsscaching
Dan Cundy
Dan Cundy

Reputation: 2849

Stop browser from loading un-updated cached version of my webpage.

Problem

My homepage has 8 images on it that can be changed via an upload page. The user after changing the 8 images navigates back to the homepage to view the new images.

However, the new images aren't displayed. The old images are still in place until the browser is refreshed.

I am guessing this is because the browser is caching the page then reloading the cached page.

Things i have tried so far.

Adding this line of code to the header.

<META HTTP-EQUIV="Pragma" CONTENT="no-cache"><!--stop caching-->

and adding a header with the above code to the bottom of the page.

<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
</HEAD>

This solution however does not work for me.

Any help or a push in the right direction would be greatly appreciated.

Whole HTML page just incase i've added the above solution in the wrong place, and for your use if needed to write a solution.

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"><!--stop caching-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluid.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div id="title">
  <h1>Bass Clef Photography</h1>
</div>
<div id="tagLine">Passion 4 Live Music &amp; Passion 4 Photography</div>
<div id="tabsContainer">
<div id="centerContainer">
 <div class='tab zero'>
      <ul>
        <li><a href="index.html">Home</a></li>
      </ul>
  </div>
    <div class='tab one'>
      <ul>
        <li><a href="#">Music Gallery</a></li>
      </ul>
    </div>
    <div class='tab two'>
      <ul>
        <li><a href="#">About</a></li>
      </ul>
    </div>
    <div class='tab three'>
      <ul>
        <li><a href="#">Clients</a></li>
      </ul>
    </div>
    <div class='tab four'>
      <ul>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class='tab five'>
      <ul>
        <li><a href="members.php">Members</a></li>
      </ul>
    </div>
</div>
</div>

<div id="content">
  <div id="photoFrame">
    <img src="uploads/picture01.jpg" class="demo-img" alt="">
    <img src="uploads/picture02.jpg" class="demo-img" alt="">
    <img src="uploads/picture03.jpg" class="demo-img" alt="">
    <img src="uploads/picture04.jpg" class="demo-img" alt="">
    <img src="uploads/picture05.jpg" class="demo-img" alt="">
    <img src="uploads/picture06.jpg" class="demo-img" alt="">
    <img src="uploads/picture07.jpg" class="demo-img" alt="">
    <img src="uploads/picture08.jpg" class="demo-img" alt="">

  </div>
</div>
</body>


    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
        <script type="text/javascript">
        (function() {
            var po = document.createElement('script'); po.async = true;
            po.src = 'https://apis.google.com/js/plusone.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
        })();
        </script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <script src="js/screenfull.js"></script>
        <script>
        $(function () {
            $('#supported').text('Supported/allowed: ' + !!screenfull.enabled);

            if (!screenfull.enabled) {
                return false;
            }

            $('#request').click(function () {
                screenfull.request($('#container')[0]);
                // does not require jQuery, can be used like this too:
                // screenfull.request(document.getElementById('container'));
            });

            $('#exit').click(function () {
                screenfull.exit();

            });

            $('#toggle').click(function () {
                screenfull.toggle($('#container')[0]);
            });

            $('#request2').click(function () {
                screenfull.request();
            });

            $('.demo-img').click(function () {
                screenfull.toggle(this);

            });

            $('#demo-video').click(function () {
                screenfull.toggle(this);
            });

            // a little hack to be able to switch pages while in fullscreen.
            // we basically just creates a seamless iframe and navigate in that instead.
            $('#iframe').click(function () {
                // We create an iframe and fill the window with it
                var iframe = document.createElement('iframe')
                iframe.setAttribute('id', 'external-iframe');
                iframe.setAttribute('src', 'http://bbc.com');
                iframe.setAttribute('frameborder', 'no');
                iframe.style.position = 'absolute';
                iframe.style.top = '0';
                iframe.style.right = '0';
                iframe.style.bottom = '0';
                iframe.style.left = '0';
                iframe.style.width = '100%';
                iframe.style.height = '100%';
                $('#container').prepend(iframe);
                document.body.style.overflow = 'hidden';
            })

            document.addEventListener(screenfull.raw.fullscreenchange, function () {
                var elem = screenfull.element;

                $('#status').text('Is fullscreen: ' + screenfull.isFullscreen);

                if (elem) {
                    $('#element').text('Element: ' + elem.localName + (elem.id ? '#' + elem.id : ''));
                }

                if (!screenfull.isFullscreen) {
                    $('#external-iframe').remove();
                    document.body.style.overflow = 'auto';
                }
            });

            $(document).on(screenfull.raw.fullscreenchange, function () {
                console.log('Fullscreen change');
            });

            // trigger the onchange() to set the initial values
            screenfull.onchange();
        });
        </script>
        <script>
            var _gaq=[['_setAccount','UA-25562592-1'],['_trackPageview'],['_trackPageLoadTime']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
</HEAD>

</html>

Upvotes: 4

Views: 2012

Answers (2)

Sam
Sam

Reputation: 122

There are only two most reliable way available as of 2018

1) <meta http-equiv="expires" content="0"> Use this meta tag but be careful because this tag destroy the all cache of the page as soon as a web page processed by browser.

2) Generate an unique ID at server for each page request and append this id at the end of the all file name inside the HTML document with ? before the unique id append on images, documents, css/js files, videos etc which need to be load from the server every time. For example if you have the HTML tag like <img src="images/profile223.jpg" alt="profile picture"> then on server side append the unique id at the end of the file name like this echo '<img src="images/profile223.jpg?'.$uniqueid.'"" alt="profile picture">'; . In this example i use php but you can generate the unique ID on any language. All big companies like Google, Facebook, Microsoft, Twitter etc. uses this technique because it is most effective way and does not effect the cache data you want to store on user browser like login session id. This technique is cross browser compatible and support older version of IE, Firefox, Chrome, Safari and Opera. You may append the unique id at the end of the url using the same technique

Upvotes: 0

Mark Nugent
Mark Nugent

Reputation: 3675

It's possible that it's not the page, but the images only that are being cached. A time-honored solution is to affix a unique query string to the end of the image so the browser reloads it -- easiest is to use a time stamp like so:

echo "<img src='uploads/picture01.jpg?" . filemtime('uploads/picture01.jpg') . "' class='demo-img' alt='PictureOne' />"

This is easy to do on the server side through php or whatnot. More info can be seen at this answer:

How to force a web browser NOT to cache images

Update: To clarify, the query string is affixed to the image filename only in the HTML document. Your image on the server would still be named (in my example) my-image.gif. You would want the query string to be a unique one every time the HTML page is served in order to prevent the browser from fetching a cached version of the image, hence the solution of using a date/time stamp.

Upvotes: 2

Related Questions