The loaded sprite file is currently unused and a duplicate request is being sent for it

I have a CSS code snippet that looks like this: 

.is--stratus .icon__nav-threats.is--gray {
     background: url('/resources/img/navIcons_RiskInsight.png') no-repeat -1px -41px;
     width: 30px;
     height: 30px;
 }
.is--stratus .icon__nav-threats.is--blue {
    background: url('/resources/img/navIcons_RiskInsight.png') no-repeat -1px -83px;
    width: 30px;
    height: 30px;
 }

Upon changing the class name from is--gray to is--blue for the element, a new request is made for the same file. This results in the background image loading after a couple of seconds, giving the appearance of a broken UI.

I am trying to understand why this is happening. Could it be related to how we are loading CSS into the page? I am using webpack1 and this issue only seems to occur in the production build, not the development build. Could it be possible that browsers do not cache images loaded through JavaScript-injected CSS?

htmlcss

Answer №1

Identified the root cause of the issue: the 'cache-control' property in the response headers. While the dev server configured by Webpack manages this properly, the settings on my Tomcat server are not configured correctly. This will need to be addressed to resolve the issue.

Comparison of cache settings:

https://example.com/dev-cache-setting.png

Tomcat server's cache settings:

https://example.com/prod-cache-setting.png

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

Having EventListeners set up across a single CSS class returns null when applied to different types of elements simultaneously

I want to create floating labels that resize dynamically when an input is clicked, similar to modern forms. I am using vanilla JS exclusively for this task. Currently, the setup works with the <input> tag. However, it does not work with the <text ...

javascripthtmlcssforms

Update the FontSize in the HTML dropdown menu using JavaScript

I am having trouble filling my Selection using a script. For example, when I try to populate my FontSizeMenu, I use the following code snippet: function FillFontSizeMenu() { FillSelection(GetPossibleFontSizes(), "fontSizeMenu"); } function GetPossib ...

javascriptjqueryhtmldrop-down-menuselection

Broken link in navigation bar

I encountered an issue with the navigation bar on this website. When I click on "Leistungsspektrum" in the navigation bar, it returns a message stating that The requested URL /leistunsspektrum.html was not found on this server. However, the actual file nam ...

htmlcsshyperlinknavigation

Modify the color of the Swing link label for disabled state

I'm currently working with Java Swing linkLabel. I've noticed that when the link is disabled, it appears in gray by default, but I would like it to be black instead. Is there a method available to change the color of a disabled link label? ...

javahtmlswingjlabel

Implementing a SetTimeout Function in HTML

Is there a way to delay calling the mouseHoverTableRow() function until after hovering on tr for 3 seconds? I only want to call this function if the hover duration is at least 3 seconds, as it triggers an API request. How can I achieve this? <tr *ngF ...

htmlangular

Preventing access to websites through a web application using JavaScript

I am in the process of creating a web application that enables users to create a list of websites they wish to block, preventing access from their browsers. My goal is to block websites on all browsers, but I have narrowed my focus to Chrome for now. I ha ...

javascriptjqueryhtmlgoogle-chrome-extensionweb-applications

Using SVG background images in Internet Explorer versions 7 and 8: a guide to HTML, CSS,

I have created a unique SVG image to use as a background, but it's not displaying in Internet Explorer 8 and earlier versions. I tried using tools like or http://code.google.com/p/svgweb/, but they only support SVG for IMG and Object elements, not ba ...

htmlcssinternet-explorer-8svgbackground-image

How to Align Navigation Searchbar in Center When Bootstrap is Collapsed

I am attempting to center my search bar when it is collapsed. Currently, it appears like this: As you can see, the links are centered, but not the search bar. This is the existing HTML structure: <!-- Navigation Bar Start --> <div class ...

htmlcsstwitter-bootstrapnavigation

Guide for utilizing a table value as a parameter in a mySQL query with PHP

My website features an HTML table that is filled with data pulled from a mySQL table using PHP. Each row in the table is clickable, and when clicked, it opens a modal that contains a form to update and submit data back to the database using a mysql update ...

javascriptphpjqueryhtmlmysql

Placing one element beside another element

I am facing an issue with my layout where I have a list taking up 100% of the height and next to it, I am attempting to place an image box. Here is the fiddle link for reference: https://jsfiddle.net/wrdvkgyj/ Even after setting my image container to inl ...

htmlcss

Set up an event listener for a specific class within the cells of a table

After spending the last couple of days immersed in various web development resources, I find myself stuck on a particular issue. As someone new to this field, the learning curve is quite steep... Let's take a look at a single row in my project: < ...

javascripthtml

Tips for implementing a toggle feature for an ion-card element

I am looking to create a toggle effect on ion-card, where clicking on the card will highlight it until either unclicked or another card is clicked. Similar to this - https://i.sstatic.net/MH5WA.png How can I achieve this effect on ion-card? Here is my H ...

cssangularionic-frameworkionic3

Resolved issue with navigation bar no longer overlapping certain sections of the website

I am in the process of creating a website that will serve as a showcase for my resume and portfolio. However, I am facing an issue with my fixed navigation bar not overlapping certain elements on the page, such as an image and progress bars, when I scroll ...

htmlcssbootstrap-4

Unlocking the power of HTML tags in Selenium WebDriver: accessing elements like a pro

I'm working with this HTML snippet. <span class="ng-binding" ng-bind="::result.display">All Sector ETFs</span> <span class="ng-binding" ng-bind="::result.display">China Macro Assets</span> <span class="ng-binding" ng-bind ...

htmlseleniumselenium-webdriver

Changing the read-only property of a form input using a button click

I have designed a form with some input fields marked as Readonly along with an icon placed beside each of them. Is there a way to toggle the Readonly property of a specific field when I click on the adjacent icon? Sample Form <div class="input-group"& ...

jqueryhtmlcss

Is there a way to automatically change the display of an element once the user has closed the menu?

How can I ensure that the display of an element remains unchanged when a user opens and closes my website menu using JavaScript? ...

javascripthtmljquerycss

Ways to incorporate additional fields into your html/php form

Is there a way to increase the number of fields in my basic form? I want to include fields like username, email, subject, and more. Just looking to add additional fields to the form. <!DOCTYPE html> <html> <head> <title>Storing Fo ...

phphtmlforms

What is the best way to utilize a single component for validating two other components?

I am encountering an issue with my components setup. I have three components in total: GalleryAddComponent, which is used to add a new element, GalleryItemComponent, used to edit an element, and FieldsComponent, the form component utilized by both GalleryA ...

javascripthtmlangulartypescriptvalidation

Creating a form in PHP with the power of JavaScript, AJAX, and jQuery

I have successfully created a registration form using HTML, processed the data with PHP, and utilized javascript, ajax, and jquery. However, I am facing an issue where I want to display a notification stating whether the operation was "inserted/failed" on ...

javascriptphpjqueryhtmlajax

I'm struggling to determine the source of the color for my linked CSS. Any ideas where to look?

I am experiencing an issue with a link that is displaying as white and gray for "a" and "a:hover", despite my CSS file specifying otherwise. Firebug confirms this, but I can't figure out what is overriding it. Can anyone offer any insight? Below is t ...

csscolors