CODEWITHSUNDEEP
javascriptjqueryajax
Ringo Blancke
Ringo Blancke

Reputation: 2444

What are some ways to speed up an img swap in jquery / javascript?

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...).

Upvotes: 0

Views: 107

Answers (2)

t0nyh0
t0nyh0

Reputation: 680

I've modified your fiddle: http://jsfiddle.net/PMnmw/12/

Things I've optimized:

  1. Created a variable for both img1 and img2, so that you won't have to navigate the DOM to reference those two images anymore, thusly improving performance.
  2. Applied a click handler to the images themselves, so you don't have to search the children of the wrapper.
  3. The basic idea was to reduce the number of jquery selections as much as possible.

Let me know if this helped speed things up.

$(document).ready(function() {
    var img1 = $('#img1');
    var img2 = $('#img2');

    $(".toggle_img").click(function(e) {
        var target = $(e.target);
        if(target.is(img1)){
             img1.hide();
             img2.show();
        }
        else if (target.is(img2)) {
            img2.hide();
            img1.show();
        }
    });
});

Upvotes: 1

adeneo
adeneo

Reputation: 318182

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 ​

Upvotes: 0

Related Questions