Why is the background image not loading properly on first hover with CSS?

Whenever we load a page with a large image set as the background for a div, there seems to be a delay in displaying the image when we hover over the div. Is there a solution to this issue? I would prefer not to use a sprite image because I need to make alterations to the image for responsiveness.

.hexagonal{
  background: url(/images/service-bg.jpg) no-repeat;
}
.hexagonal:hover {
  background: url(/images/service-bg-over.jpg) no-repeat;
}
<div class="hexagonal">
  <ul>
    <li>test1</li>
    <li>test1</li>
  </ul>
</div>

javascripthtmljquerycssbootstrap-4

Answer №1

Due to the large size of this image, it may take a moment to load when you hover over the element, resulting in a temporary blank space.
To address this issue, consider preloading the necessary images for smoother hovering effects. While there are JavaScript solutions available in the comments, opting for a CSS-based approach could be more convenient as it eliminates the need for additional scripting.
To preload images using CSS, you can set the content of the after pseudo-element in the body and then hide the element.

body::after{
   position:absolute; 
   width:0; 
   height:0; 
   overflow:hidden; 
   z-index:-1; /* hiding images */
   content: url(/images/service-bg-over.jpg);   /* loading images */
}

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

Tips for resolving the issue: Uncaught (in promise) SyntaxError: Unexpected end of input in Fetch API

When I click the button, I am executing this function. Despite adding a header in my API, an error is still being displayed. Here is the code snippet for the function: let getData = () => { console.log("getData function started"); ...

javascriptjsonapipromiseasynchronous-javascript

Encountering a JSON error while attempting to login through an API on the Ionic platform

While implementing the login functionality through API in Ionic, I encountered the following error: Error: Property 'json' does not exist on type '{}'. Below is my loginpage.html code: <ion-header> <ion-navbar> & ...

htmljsonangularionic-frameworkionic3

Arranging an Array of Arrays Containing Strings

Looking for a solution to sort an array containing arrays of strings? A similar issue was discussed here. Here is the array in question: var myArray = [ ['blala', 'alfred', '...'], ['jfkdj', ...

javascriptarraysnode.jssorting

Having trouble accessing the iframe element in an Angular controller through a directive

My webpage contains an iframe with a frequently changing ng-src attribute. I need to execute a function in my controller each time the iframe's src changes, but only after the iframe is fully loaded. Additionally, I require the iframe DOM element to b ...

javascripthtmlangularjsiframecallback

What is the best way to align these divs horizontally?

I am facing an issue with my web page layout. I have a list of topics that I need to display, with four topics in each row. However, when I try to render them, they end up aligning vertically instead of horizontally like this: This is the CSS code snippet ...

cssreactjs

Unable to locate image in React framework

When attempting to display an image, I encountered a 404 error even though the folder containing it is being served properly. Code snippet from JSX file: render: function(){ ... return <button type="button" id="powerButton" onClick={this.someFun}>& ...

javascriptreactjs

The Complex World of JavaScript Variable Mutation

Currently, I have a loop in my code that checks the id of the last div on the page and uses AJAX to replace it with an updated div. However, if the loop runs again and the id remains the same, it just adds another duplicate of the updated div. My goal is ...

javascriptjqueryajax

What are the steps to troubleshoot and fix the Internal Server Error on Next.Js?

I recently set up a new Next.js app using the command npx create-next-app. After that, I added Sass to my project with yarn add sass and proceeded to run it with yarn dev. To my surprise, I encountered multiple errors in both my terminal and on localhost. ...

javascriptreactjsnext.js

What are some effective methods for overriding materialui styles?

Here is the CSS style for a checkbox in Material-UI that I captured from the console: .MuiCheckbox-colorPrimary-262.MuiCheckbox-checked-260 I attempted to override this style using the following code, but it was unsuccessful: MuiCheckBox: { colorP ...

cssreactjsmaterial-ui

Trouble arises when attempting to link AJAX with PHP

Can you help me troubleshoot this code? It's a menu and page change using AJAX without refreshing the page, but it's not functioning properly. This is my AJAX code: <script> $(document).ready(function() { $('.news& ...

phpjqueryajax

Set element back to its default state

When working with JavaScript, how do you go about restoring the default behavior of a DOM element's event handler? For instance, let's say you've set the onkeypress event for an input element: elem.onkeypress = function() { alert("Key pres ...

javascript

Hide the selection box when hovering over the Div

Looking for a quick solution. I want the option drop down to close when another div element is hovered over. First, open the drop down and hover over the red element on the right side. When hovering over the red element, I would like the drop down to clos ...

javascriptjqueryhtmlcss

Issue with button vanishing upon clicking page forward in pagination for table

When I click the next button on the table pager, a button that is inline with the pager disappears. I'm not sure why this is happening. If you want to see my code, check out this JS Fiddle: $table.trigger('repaginate'); var pager = documen ...

jqueryhtml

assign a category to the initial item in the array

I need assistance with jQuery array elements... <div id="holder"> <div class="X">X</div> <div class="X">X</div> <div class="X">X</div> <div class="Y">Y</div> <div class="Y ...

jqueryarraysclass

Dealing with Class and Instance Problems in Mocha / Sinon Unit Testing for JavaScript

Currently, I am working on unit testing an express middleware that relies on custom classes I have developed. Middleware.js const MyClass = require('../../lib/MyClass'); const myClassInstance = new MyClass(); function someMiddleware(req, ...

javascriptunit-testingexpresssinonchai

"Encountering issue with componentDidMount() not functioning as expected, despite debugger being

Hello everyone! This is my first time sharing something here, so I'm eager to hear your feedback on both how I've posted and the content itself. I've only been programming for 8 weeks now, so I'm sure there are plenty of mistakes in wha ...

javascriptreactjsreact-redux

Access to the Express Node.js server is restricted to the machine that is currently hosting the server

I am facing a beginner issue with using express. I am on Ubuntu 14.04 and created a new directory where I ran "express" in the terminal to set up a project template. Following that, I ran "npm install" to install the dependencies. I then made changes to &a ...

javascriptnode.jsexpress

Trouble accessing selected value from drop down list in ASP.NET codebehind following modification of Javascript attribute

Does anyone know why ASP.NET code behind cannot retrieve the selected value? After investigating, I discovered that the issue lies within the JavaScript function; Specifically in the set attribute section: process.options[process.selectedIndex].setAttrib ...

javascriptc#asp.net

I possess information stored within the array object below, and I aim to transform it into a different array object format

Here is the response I received from my API: let data = [ { date: '2021-04-27', formatted_date: 'Apr 27', location: [ { date: '2021-04-27', formatted_date: 'Apr 27', countr ...

javascriptarraystypescriptjavascript-objects

What is the best way to vertically center a div that has a fixed position and a specific width in pixels

Is there a way to center a fixed position div with a specified width of 300px, rather than in percentage? <div class="mainCont"> <div class="childCont"> </div> The childCont div has a fixed position and width of 300px. How can I ensur ...

jqueryhtmlcss