Load Jquery hover images before the users' interactions

Currently, I am in the process of creating a map of the United States. When hovering over any specific state, my goal is to replace the image with one of a different color.

The issue I am encountering lies in the fact that the image gets replaced and a new one is loaded each time there is a hover event.

My HTML structure looks like this:

<img class="state" id="alaska" src="img/united-states_Alaska.png" alt="alaska">
<img class="state" id="hawaii" src="img/united-states_hawaii.png" alt="hawaii">

Below is the jQuery code I am implementing:

$('.interactive-map img').each(function(e){
    var src = $(this).attr('src');
    $(this).hover(function(){
      $(this).attr('src', src.replace('.png', '-hover.png'));
    }, function(){
      $(this).attr('src', src);
    });
});

I am interested in finding an alternative method to either preload the images using JavaScript or prevent a new image request upon every hover action. Ideally, I would like to make these optimizations within the JavaScript without making significant changes to the HTML or CSS.

javascripthtmljquerycssjquery-events

Answer №1

Upon page load, include your images on the DOM in a hidden state so they can be cached for better performance

$(function() {
 var images = ['url/to/your/jpg1.jpg', 'ur/to/your/png2.png'];
 var d = document.createElement("div");
 d.style.display = 'none';
 document.body.appendChild(d);
 for (var i in images) 
 {
   var img = document.createElement("img");
   img.src = images[i];
   d.appendChild(img);
 }
});

Answer №2

Include two image tags and apply the style display: block to the first image. Hide the second image with display: none.

When hovering over the images, swap their display properties. It's a simple way to achieve this effect.

Answer №3

Discover the Power of PreloadJS

Here's an example to get you started:

let preload = new createjs.LoadQueue();
preload.addEventListener("fileload", handleFileComplete);
preload.loadFile('http://createjs.com/images/404/gBot-confused.jpg');
function handleFileComplete(event) {
    document.body.appendChild(event.result);
}

For more information, check out the full documentation

Interested in other ways to leverage JS and AJAX? Check out this informative post on Preloading 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

Troubleshooting the non-responsive behavior of Bootstrap's hidden-sm-down

Why are the two images within the <div> with hidden-sm-down still visible on my laptop when I resize the page? I need them to be hidden on small devices for a different menu layout. <div class="row"> <div class="col-m ...

htmlcsstwitter-bootstrap

maximum distance a button can respond to in a CSS layout

I'm trying to figure out why my CSS button has such a large clickable area. Is there a way to reduce it? When I hover over the button, the clickable area extends beyond the text, which is not ideal. Any suggestions on how to fix this without altering ...

htmlcss

Using @material-ui/core/useScrollTrigger in a Next.js application: a step-by-step guide

I have been researching the Material-UI documentation for useScrollTrigger and attempting to implement it in Next.js to replicate the Elevate App Bar. https://material-ui.com/components/app-bar/#usescrolltrigger-options-trigger import React from "react"; ...

javascriptreactjstypescriptmaterial-uinext.js

The Sizzle.js error, "Uncaught TypeError: undefined (reading 'expr')," is causing some trouble

$.expr[':'].containsCaseInsensitive = function (n, i, m) { return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; }; .expr is not recognized. To ensure it's defined, I included a CDN link below: <script src=&qu ...

javascript

I am curious about the significance of the "=>" symbol within the Ionic framework

I utilized the documentation provided on the Ionic website to incorporate Firebase into my mobile application. this.firebase.getToken() .then(token => console.log(`The token is ${token}`)) // store the token server-side and utilize it for sending not ...

javascriptandroidangulartypescriptionic-framework

Having trouble figuring out how to load images into a div based on the current page location?

Looking for a solution to my problem - I have a navigation bar with a fixed div (A) on the far right side. The nav bar remains at the top of the page. There are 6 sections in the body of the page, each being 1200px tall divs. What I want is for a different ...

javascriptjqueryhtmlcss

Tips for integrating Series data into Highcharts using MVC

Looking at this JFiddle demonstration of Highcharts http://jsfiddle.net/yxz80f4u/9/ We can observe the data being inserted as [Date.UTC(YYYY,MM,DD,HH,MM,SS), Y-data-point] data: [ [Date.UTC(1970, 7, 5,1,1,1), 2.22], [Date.UTC(1 ...

javascriptc#model-view-controllerhighcharts

The sequencing of operations in Node.js streams

I am having an issue with validating an image before saving it to disk. Currently, I am utilizing the GM library. // Express application implementation app.post('/image', function(req, res) { var stream = gm(req) .size({ bufferStr ...

javascriptnode.jsexpressstreamgraphicsmagick

Effortless File Uploading in JERSEY using jquery and AJAX

I'm looking to achieve file uploads with Jersey through jQuery/AJAX, but I'm struggling with extracting the file from the input and sending it via AJAX. Below is my current code: HTML <form action="rest/files/upload" method="post" enctype=" ...

javajqueryajaxrestjersey

Solving templateUrl resolution of directives in Angular with RequireJS

Currently, I am using AngularJS and RequireJS in my single-page application (SPA). To organize imports efficiently, I rely on RequireJS. With RequireJS, I can utilize features like baseUrl to resolve import paths seamlessly. Now, I wish to apply the same r ...

javascriptangularjsrequirejsangular-directive

Executing an AJAX request to insert data into MySQL

After my extensive online search, I came across a solution that involves using ajax to set information in my database. While browsing through this page, I learned how to retrieve data from the database. My specific query is: can we also use ajax to set in ...

javascriptphpmysqlajax

Encountered a CSS error while trying to compile the project with npm build

When attempting to build the project, I encountered a postcss error. After some debugging, I discovered that the imports below were causing the issue: @import "@material/button/dist/mdc.button.min.css"; /*material text box css*/ @import "@material/float ...

javascriptlaravelvue.jsvite

typo in tweet share button

There seems to be a strange typo in the Twitter button on my website: https://i.sstatic.net/mx3NB.png Here is the code for the button: <a lang="<?php echo mida_is_english() ? 'es' : 'he' ?>" href="http://twi ...

phphtmltwitter

Calculate the sum of multiple user-selected items in an array to display the total (using Angular)

Within my project, specifically in summary.component.ts, I have two arrays that are interdependent: state: State[] city: City[] selection: number[] = number The state.ts class looks like this: id: number name: string And the city.ts class is defined as f ...

javascripthtmlarraysangulartypescript

Can the minimum length be automatically filled between two elements?

I'm struggling to find a way to adjust the spacing of the "auto filling in" dots to ensure a minimum length. Sometimes, on smaller screens, there are only one or two dots visible between items. Is there a way to set a minimum length for the dots in th ...

javascripthtmlcssspace

Displaying the contents of all files within a directory on a webpage by utilizing AJAX and JQuery

Scenario: Within my server, there exists a directory housing various log files. My objective is to exhibit all these files on a single webpage in a sequential list, with the most recent log positioned at the bottom. These logs are generated externally (ou ...

jqueryhtmlajax

Overruled fashion

Here is the HTML code from my custom page: <div class="notes quotes-notification member-savings f-left"> <h2>My Notifications</h2> <ul> <li><b>I need to make some changes in the HTML, different from other pages you have ...

htmlcss

Combining a name using JavaScript even if certain parts are not available

How can I efficiently combine name elements without any extra white space in Vue.js? let FirstName = "John" let MI = "G" let LastName = "Jones" let Suffix = "Jr." I want to create let fullName = "John G Jones Jr." However, in cases like this: let First ...

javascript

extracting characters in php

Here's the HTML code I'm working with: <p style="color:red;font-size:12px;">This budget-friendly car offers great value, complete with air conditioning making it perfect for couples and small families. There is a ?500 excess, but it can be ...

phphtmlsubstring

A guide on verifying a phone number using just one character

I am looking to validate a phone number with only one character being allowed. For example, the format should be XXX-XXXXXXX where "-" is the only allowed character. Below is my validation function: function validatePhoneNumber() { if(addform.staff_m ...

javascripthtmlcss