CODEWITHSUNDEEP
htmlsharepoint
dmmedeiros
dmmedeiros

Reputation: 15

How to prevent browser image caching in HTML

Looking for some help on a HTML issue I am running into with Images caching on all browsers.

Scenario:

I am currently using HTML code to build out a custom page on SharePoint Online. The HTML Code is embedded into a Content Editor Web Part. We currently have an image link that points to a file called "article-photo.jpg" and this will be constantly updated by my Marketing Department using the same file name.

Right now, when I overwrite the file stored in Site Assets Library in SharePoint, with a different image but using the same file name, I close out of Internet Explorer and head back into my SharePoint Site, but the old image still appears. Until I hit the Refresh button is when the new image appears on the screen. In Google Chrome, the image does not update at all when I hit F5 to refresh. I have to use Shift+F5 to perform a full refresh and then the image updates.

I am currently not using any meta tags in my header of my HTML code. The img src that I am using is an absolute path to the image located in the Site Assets library. The HTML file only contains CSS to brand the page, but I am looking to see if I can throw anything into the header of the file that would prevent the image from caching on all browsers.

Thanks for the help with this, Dave

Upvotes: 1

Views: 3300

Answers (1)

Kimzter
Kimzter

Reputation: 46

Expanding on the previous comments, add the image with a time stamp, like so:

<div id="bck-img"></div>
    <script type="text/javascript">
            var container = document.getElementById("bck-img");
            var image = document.createElement("img");
            image.setAttribute("src", _spPageContextInfo.webAbsoluteUrl+"/SiteAssets/article-photo.jpg?rev="+new Date().getTime());
            container.appendChild(image);
    </script>

_spPageContextInfo.webAbsoluteUrl is the URL of the current sharepoint web, whereas ?rev="+new Date().getTime(); appends the timestamp to the filename, ensuring it'll be loaded from server on every page load.

Upvotes: 1

Related Questions