How to correctly switch images with javascript?

Tags: javascript,jquery,html,css

Problem :

I have somewhat complex div structure on my page and I want to switch some images (on hover), but I can't directly set hover with css because the image I want to make hover on is behind another transparent image. Therefore I have created transparent overlay on the top. When the overlay is hovered, specified div's background is switched.


<div id="image"></div>
<div id="overlay"></div>


#image {
    position: absolute;
    width: 300px;
    height: 300px;
    background: url(myImage.jpg);

#overlay {
    position: absolute;
    width: 300px;
    height: 300px;

and here is jQuery doing the switching:

$(function() {
     $("#overlay").hover(function() {
              "background": "url(myNewImage.jpg)"
     }, function() {
              "background": "url(myImage.jpg)"

It switches the images without problem. Issue is that there is a small delay while the images are switched so for a moment (less than second) you are able to see blank background (when #image div is not filled with either image).

On the other hand when you use plain CSS without jQuery to switch images like this (which is not possible in this case) then there is no such delay.

So, using jQuery, how would you prevent this delay from taking place? Or is there a better way to solve this?

Solution :

Your problem is the image you're loading in via jQuery is not preloaded. When you switch out the image, the image takes a second to download. When you have image URLs in CSS, all of those images are downloaded with the stylesheet. The solution to your problem is to preload your images.

    CSS Howto..

    How to remove space between bannner and content in wordpress theme?

    Best way how to put elements above an tag?

    How to implement a version of css?

    How to get margin to be relative to text amount css

    How To Do A Webkit Slide Cover Page Transition

    How to move Woocommerce Description tab below review tab

    How do I get my tabs to line up properly using CSS?

    How to set a (nice) linear-gradient from any color to transparent?

    How to achieve a silk-screen effect (a dotted shadowy effect) on an image with javascript/jquery?

    how to print no blur content over a blurred div

    Flexbox used for equal height, however it is ignoring column width in grid system

    how to add css to selected row in treegrid GXT 3

    How to animate DOM elements with JavaScript/CSS

    How to apply css to id generated dynamically?

    how to make a css “if opera,not…”

    how i can select some attribute value from in line css

    CSS - HTML - How to align images properly across the page

    How to fix a double click on a jQuery slide up/down animation?

    How do you make a CSS menu for mobile devices that stays the same size regardless of page zoom?

    My CSS looks perfect on desktop, but leaves a 2-5 pixel line to the right on mobile, how do I find the issue?

    How to align my dropdown menu to center of the page?

    How to fix a glitchy header collapsing to nav bar

    How to have a css element with transitions except initially?

    How to remove Clear:Both in CSS

    How to select only for the first of divs with equal names?

    How to solve this weird issue in html table and css.

    How to apply custom CSS and Javascript specific CMS page Magento

    PHP: How to add a CSS text-align property to an already present inline style attribute of an element using simple_html_dom parser?

    How to Dynamically Fit image in screen using css

    Jquery/CSS, how to have and access multiple (left) panels, while adjusting main content container automatically