Question

I have a slightly vague question. I have the following in my code: http://jsfiddle.net/PMnmw/2/

In the jsfiddle example, it runs smoothly. The images are swapped quickly and without any hassle. When it is in my codebase though, there is a definite lag.

I’m trying to figure out why that lag is happening. The structure of the jquery is exactly the same as above. I.e. Inside the $(document).ready (…) function, I have a check to see if the user clicked on the img (based on the classname) and then I execute the same code as in the jsfiddle.

I’m at my wits end trying to figure out what to do here… Clearly I’m not doing the swap right, or I’m being very heavy handed in doing it. Prior to this, one of my colleagues was using AJAX to do the swap, but that seems to be even more heavy duty (a full fledged get request to get the other icon…).

Answer 1

Images that are not visible are normally not loaded by the browser before they are made visible. If there seems to be a problem, start by downloading an image optimizer like RIOT or pngCrush to optimize your images.
If it’s only two arrows, you should consider joining them into a CSS sprite.

You could try not doing everything with jQuery, but it shouldn’t really make that much difference.

Something like this maybe, with the hidden image loaded in JS and some traversing done outside jQuery (but that is probably not the problem, although the code seems overly long for a simple image swap?) :

$(document).ready(function() {
    var img=new Image();
        img.src='http://i.imgur.com/ZFSRC.png'; //hidden image url

    $(".wrapper").click(function(e) {
        if(e.target.className=='toggle_img') {
           $('.toggle_img').toggle();
           if (e.target.parentNode.childNodes[1].style.display=='none') {
              console.log("hello");
          } else {
              console.log("goodbye");
          } 
        }
    });    
});

FIDDLE
​