Does a browser's cache utilize storage for XMLHttpRequest responses?

I have a question regarding browsers in general, with a focus on Chrome.

Imagine I have the following code snippet in my file, index.html:

<img src='//path/to/foo.img'></img>

The file foo.img changes on my server every hour. I would like to prefetch this image on the hour so that when a user refreshes the page, the updated image //path/to/foo.img is loaded from the browser's HTTP cache.

I have a few uncertainties:

  1. Are XHR responses cached by default?
  2. If so, do they utilize a different cache than the one used for fetching img, css, js, etc. requests?
  3. If the answer to #2 is no, would it be enough to send an XHR for //path/to/foo.img to have the response cached and subsequently used by the browser upon page refresh?
javascripthtmlcssgoogle-chromecaching

Answer №1

When it comes to caching in browsers, it's important to consider how image, js, and css files are handled. If you're using a fixed image path or URL for the image src, it's recommended to include a random nonce (often just a random number) with the image URL each time. This way, your image path may look something like this:

<img src='//path/to/foo.img?9876543'></img>

Adding this random nonce ensures that the previous cached image is not loaded, and that a new image is fetched from the server every time the page is refreshed.

Answer №2

If you want the browser to load a new version of a cached file, follow these steps:

  1. Set up a hidden iframe with an <img> tag inside
  2. Include JavaScript in the iframe to trigger location.reload(true);. This will prompt the iframe and all its linked resources to reload from the server and update the browser cache.
  3. Ensure it only reloads once to avoid an infinite loop. You can achieve this by setting a cookie, updating location.hash, or checking resource timing to confirm if the resource was fetched over the network before reloading.

For more information, check out and .

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize AngularJS to inject a service into a module without assigning it to a variable, enabling easier minification

Currently, I am attempting to decrease the size of my AngularJS JavaScript code (using SquishIt). Within my module, there is a service injected as a function argument, as shown below. var myapp = angular.module('myapp', ['ngSanitize'] ...

javascriptdependency-injectionminifyangularjs

Success callbacks parsed from AJAX requests

When dealing with a Backbone object and making an AJAX call to save it, I often wonder about the different ways the success callback can be handled. Sometimes, I see a generic success: function (data) { console.log(data); Other times, it's more spec ...

javascriptajaxbackbone.js

The server encountered a "Cannot GET /socket.io" error while trying

I am experiencing an issue with my app that uses express/socket.io. The app is running smoothly without any errors, but when I make an http-request, I receive the following error message: GET http://xxxxxxx.com:3035/socket.io/1/?t=1449090610579 400 (Bad R ...

javascriptnode.jsexpresssocket.io

Unable to utilize navigator.camera.getPicture in iOS while using PhoneGap Adobe Build

I've spent hours searching, trying to troubleshoot my PhoneGap app (compiled by Adobe PhoneGap Build) and I suspect there's something crucial about PhoneGap that I'm missing. I've added the following lines to the config.xml file: <f ...

javascripthtmlcordovaphonegap-build

Issue with Vue.js devtool not appearing in browser

Currently, I am integrating moment.js into a Vue component but I am facing an issue where certain changes are not being reflected in vue devtools. Here is an example of my code: export default { data() { return { moment: moment(), ...

javascriptvuejs2vue-componentvue.js

What is the functionality of the keydown event?

Whenever the input text value is not empty, I want my .removetext div to be displayed, but it's not working correctly. When I type something after the second character, my .removetext gets hidden, but it shouldn't be hidden when the input is not ...

javascriptjqueryhtmlcss

What is the best way to choose just the items with a distinct key from within this jQuery assortment?

[Object, Object, Object, prevObject: jQuery.fn.init[3], context: undefined] 0: Object 1: 1 2: 2 3: 7 __proto__: Object 1 : Object 1: 6 2: 2 3: 5 6: 15 __proto__: Object 2 : Object 1: 3 2: 2 3: 5 5: 7 ...

javascriptjquery

What techniques are most effective for creating unit tests in a Node.js environment?

One of the challenges I am facing is writing a unit test for a module where I load a mustache template file. To tackle this, I am exploring the use of mocha, chai, and rewire. Below is an excerpt from my module.js: var winston = require('winston&apo ...

javascriptnode.jsunit-testingmocha.jschai

Retrieve childNodes of the Select All input using jQuery from the container node with the class name "container"

I am trying to retrieve the text value of all the childNodes within the container of the corresponding input when the Select All checkbox is checked. Currently, my code captures the text inside each input label. However, it only logs the label (e.g. &apos ...

javascriptjquerydomleaflet

Utilizing jQuery to extract the `h1` element from a dynamically loaded external page within the

I am facing a challenge in selecting an h1 element from a remote page that I have loaded into $(data). Despite several attempts, I am struggling to write the correct code. When I use this code: console.log($(data)); The output is as follows: [text, meta ...

javascriptjqueryhtml

Basic looping through a single item to showcase its properties and data

I have an object that looks like this: const people = { men: 4, women: 2, total: 6, participants: { 1: 4, 2: 1, 3: 0 } }; I am looking to display the following result: 1 participants count 4 2 participants count 1 3 participan ...

javascriptloopsreactjsecmascript-6

What is the process for saving information to a database with JavaScript?

I am currently utilizing the Google Maps API for address translation, primarily through the use of a geocoder. I am interested in saving these results to a local database for future reference, as there are limitations on the total number and frequency of ...

javascriptdatabase

Can SCSS be used in conjunction with Less in a backwards compatible manner?

Can scss be considered backwards compatible with less? Personally, I have my doubts. One key difference is that while less uses '@' to prefix variables, scss opts for '$'. Changing the variable prefix might not be enough, as there are l ...

csssassless

Make sure to enable contentEditable so that a <br> tag is inserted

When using a contentEditable, it automatically wraps words to create a new line once the width of the editable area is reached. While this feature is useful, I am facing an issue when parsing the content afterwards as I need it to insert a <br> tag ...

javascripthtmlcontenteditable

What steps can I take to make my search button work with this JavaScript code?

I am struggling with integrating my custom search bar with a JavaScript code to make it functional. Here is the code snippet for the Search Button: document.getElementById('searchform').onsubmit = function() { window.location = 'http:/ ...

javascripthtmlgoogle-search

Retrieving Data from Outside Source using AngularJS

Is there a way to retrieve JSON-Text-Stream data from a specific URL (e.g. SOMEURL/ean.php?id=4001513007704)? The returned result typically appears as follows: { "product": { "ean_id": "4001513007704", "title": "Gerolsteiner Mineralw ...

javascripthtmlangularjscordovaionic-framework

Configuring Vue.js watchers inside a for loop

Exploring the dynamic addition of watchers in Vue.js. The discrepancy between what is desired and what actually happens is demonstrated below in the commented section. As a casual coder, I believe my issue lies more in grasping JavaScript basics rather t ...

javascriptvue.jsvuejs2

Codeigniter not functioning properly with Ajax

I am trying to implement this javascript function $('a[name=deleteButton]').on('click', function () { arr=[]; var arr = $("input[name='post[]']:checked").map(function() { return this.value; }). ...

javascriptphpjqueryajaxcodeigniter

The script is showcasing text on both instances

I am currently working on a script to show text to users who are using adblock. The script I am using is as follows: ads.js <script>var canRunAds = true;</script> index.php <script data-rocketsrc="ads.js" type="text/rocketscript">< ...

javascriptadblockrocketscript

What is the best way to designate unique custom login redirects based on user type?

I am facing a challenge that I can't seem to overcome. Part of the issue is my struggle to articulate it effectively with the right terminology. As a newcomer in this field, please forgive me for posing such a clumsy question. Below is an outline of ...

phpjavascriptmagentojquery