Revitalizing pictures in Safari while using iOS

My JavaScript application requires frequent refreshing of thumbnails. I have implemented a timer that changes the src attribute of a thumbnail from someImage.jpg to someImage.jpg?0, then someImage.jpg?1, and so on. This method successfully triggers a reload of the image on most desktop browsers, but Safari on iOS (iPad and iPhone) seems to have a stubborn caching policy that prevents this.

Safari ignores the querystring and does not request the new asset, causing an issue in updating the images. Is there a way to force all browsers, including Safari, to reload an image?

Any solution that involves changing the URL of the image server-side would not be feasible for me, so I am seeking a JavaScript-based approach to solve this problem.

Answer №1

After some investigation, it appears that the problem lies in Safari retaining multiple copies of downloaded assets, even after reloading the page. This results in all images with names like someImage.jpg?0, someImage.jpg?1, and so on being stored in the cache. Implementing a random querystring has proven to be an effective solution.

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

What is the best way to add a dynamic parameter to the URL?

Here is an example of my URL: https://my-website.com/api/players?countryId=1&clubId=2&playerName=abc The parameter values can vary. This is the code snippet I use: getDataPlayer(payload) { let params if(payload.countryId && payl ...

Removing information from a database using the delete function

I'm currently facing an issue while trying to delete an item from the database using a button that calls a delete function. Everything seems to be working fine, and I can see the API call for deletion in the console. However, the req.body is coming up ...

I am encountering an issue with express-session where it is failing to assign an ID to

Seeking assistance with utilizing express-session to manage user sessions on arcade.ly. I have not specified a value for genid, opting to stick with the default ID generation. However, an ID is not being generated for my session. An example of the issue c ...

What is the best way to choose an item from one div and place it into another?

I am attempting to select an anchor from one div to another using jQuery functions such as next(), siblings(), parents(), parent(), and more. Below is an example of the HTML structure: <div class="thumbs"> <div class="section"> <d ...

Disabling interface rotation in a second UIWindow with rootViewController when it is blacked-out

(iOS 7.0.3, Xcode 5.0.1) In my app, I have implemented a second UIWindow to display a custom magnifier above the status bar. However, I am facing an issue where the main window turns black during the interface rotation animation after setting the rootView ...

Challenges with using multiple setInterval() functions for handling AJAX calls - (implementing a cooldown system for items stored in

I've encountered an issue with my code and need some help to resolve it. The expected behavior is that when _loadInventory() is called, it should then apply _loadCooldowns() to all elements with the .cooldown class, which essentially function as count ...

Angular Directive Fails to Execute Within ng-repeat Loop

In my current configuration, I have: App/Directive var app = angular.module("MyApp", []); app.directive("adminRosterItem", function () { return { restrict: "E", scope: { displayText: "@" }, template: "< ...

Recording the descending data points (excluding the dragged positions) from the bootstrap slider

I am struggling with the implementation of the BootStrap Slider from this source: I have encountered an unusual requirement. I need to capture the values of the slider only when the user stops dragging it, not during the process of sliding. In other words ...

The primefaces codeMirror is failing to properly load its own CSS and JavaScript files

I am experiencing an issue with codeMirror from primeface-extension when trying to use it with SQL syntax. Upon loading the page that contains this component, I encounter a 404 error where the Css and javascript components cannot be found. Despite having ...

Handlebars If the length of variable is more than

I'm currently working on creating email templates using Foundation email and Handlebars. My goal is to display certain headings based on the data passed to the component, but I haven't been successful so far. Can you help me identify what I am do ...

Customizing Bootstrap to automatically display a modal without the need for a button click

According to the Bootstrap website, modals are typically triggered using buttons. As I am working with React, I would like to control when the modal is displayed using JavaScript. Is there a way to have the modal appear by default? Here is the code snip ...

Attempting to iterate through the div in order to collect all of the checkboxes and assign a label to each one

I am attempting to modify a piece of JavaScript code in order to locate all checkboxes, assign names to them, and then add label attributes with CSS for accessibility purposes. Here is the snippet of my existing code: <tr class="el-table__row" ...

Calls to debounced functions are postponed, with all of them running once the waiting timer is complete

Utilizing the debounce function to create a real-time search feature. Researching more on debouncing from https://css-tricks.com/debouncing-throttling-explained-examples/, it seems like the function should control the number of calls made. In my scenario ...

Creating dropdown menus dynamically and populating them based on the selection made in one dropdown menu to determine the options available

Looking to enhance the filtering options in my ngGrid, I stumbled upon the concept of Filtering in Ignite UI grid and was impressed by its functionality. I am now attempting to implement a similar feature in AngularJS. Breaking down the task into 4 compon ...

Retrieve data from MySQL database by utilizing Ajax

I am attempting to fetch a row from a MySQL database using ajax, see the code below: jQuery.ajax({ type: 'POST', url: 'Connection.php', dataType: 'text', ...

How can I defer Tween.js animation in three.js until a button is specifically clicked?

I am trying to implement a tween animation for my camera in three.js that should only start when a specific object is clicked. This object can be within the scene or it could be a simple HTML button. The code snippet below demonstrates how the camera anima ...

Error in MongoDB Connection: Timeout issue caused by an unresolved Promise

Issue Overview Whenever I attempt to execute nodemon server, a timeout error is displayed indicating [nodemon] app crashed - waiting for file changes before starting.... Detailed Problem Description I have three files located at the following paths: ...

Enclosing Functions Within Anonymous Functions - JavaScript

Recently, I've delved into the world of using anonymous JavaScript functions and have a query regarding their usage with event listeners through jQuery. For instance, I have the following event listener that triggers actions upon the submission of a ...

DataTables: Display action button based on specified condition in query

I am using jquery DataTables to display data via an ajax call. Everything is loading smoothly and I have included an action button in the last column that will add the data to another database. However, I am struggling with one aspect: After the button ...

Converting JSON into Xcode 7 using Swift 2 and PHP

Encountering an issue with my code on the line where I declare 'let task = session'. The application runs fine, but when attempting to load JSON data, it abruptly stops and displays a fatal error in the console: Unexpectedly found nil while unw ...