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.

HTML:

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

CSS:

#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() {
          $("#image").css({
              "background": "url(myNewImage.jpg)"
          });
     }, function() {
          $("#image").css({
              "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 add objects in a DIV and appear above the DIV

    How to adjust responsive behaviour of menu bar's elements

    How to add gradient to font face (CSS)?

    How to get CSS table-cell to 100% for responsive design [closed]

    How can I add a consistent left margin to a checkbox label?

    In CSS/JS, how to word-wrap at every nth word?

    how to change css for a seletor when the selector doesn't exist javascript / jquery

    How to add space using css?

    If the tabs use all images to show text + icon on each tab, then how to add text to to help search engine to find the keywords on the tabs?

    How to change order of elements inside tables?

    How to scroll in a div?

    How to use this CSS font technique?

    How to use printer friendly function with CTRL+p?

    Have there been measurements on how much faster CSS is than Javascript for coding an effect? [closed]

    How to make text wrap when resizing in a inline div, without the div moving onto a new line first?

    How to change padding using php in options framework

    How to Change the Color of Selected Content

    How to place div in top right hand corner of page

    How to do such layout with html+css?

    Font Styling Issue ~ how to make font smooth/Strong in html css

    How to add css class?

    How to reverse the text with js/css? [duplicate]

    css: how to remove pseudo elements (after, before, …)

    CSS how to place an image to the right of variable width text on roll over?

    How to center the pagination in jQuery Bootstrap DataTables plugin?

    How to fix side bar and header using CSS for JS & jQuery Scroller

    CSS:How to properly remove border using CSS when border-radius is used?

    How to create this quote box with (preferably) HTML5/CSS3?

    How to make my .css and .js file work with my html code loaded in a WebView on Android

    how to go bottom of a website like back to top using javascript?