Speed up iteration over array javascript / jquery

Question

function pop(index,value) {
    if (typeof thumbnail_list == 'undefined') {
         thumbnail_list = {};
    }
    thumbnail_list[index] = value;


}

function render() {
    $.each(thumbnail_list, function(i, v) {
        $("#"+i).attr("src",v);
    });
}

This is my code, what happens is a list of thumbnail paths (value) are fed into pop with the img id (index). There around 500 thumbnails fed. When render is executed, it adds the src to the img, showing the image. This is taking a while to populate. The thumbs are only 100 x 50px and 5kb. Is it just the shear volume, or is my code slowing things down?

Browsers can only handle so maybe connections to a server at one time. You should consider spriting those thumbnails — Joe
– Joe, Commented Oct 17, 2011 at 15:00
Good suggestion, you can increase the connections as well by loading from different sub domains because I believe only 2 simultaneous connections per domain can be retrieved. — endyourif
– endyourif, Commented Oct 17, 2011 at 15:03
I've heard of this. so foreample localhost1/pic1.png, localhost2/pic2.png — joedborg
– joedborg, Commented Oct 17, 2011 at 15:06
perhaps you could simplify the values of the id or src attributes. For example, if you have 500 thumbnails, just have the values run from 000 to 500 and add ".jpg" at the end. Something similar for the id attribute. Then you could do a for loop, which might save time. — bozdoz
– bozdoz, Commented Oct 17, 2011 at 15:08
The id tribute is simply 0-500 all ready. I should maybe have mentioned this. — joedborg
– joedborg, Commented Oct 17, 2011 at 15:12

jfriend00 · Accepted Answer · 2011-10-17 15:26:20Z

I rather doubt your performance problem is the pure javascript execution time of your loop. It is much, much more likely an issue of how long it takes a browser to load 500 separate images, even if they are small.

It takes a meaningful amount of time for the browser to fetch 500 images over the internet. Due to connection management, it will only request N at a time and have to wait for images to finish loading before requesting more. This serialization of the loading can really add up. As such, these are some ways to speed up the loading:

Use Sprites where you can load one image and display many thumbs from different parts of it. This is the most efficient way to display lots of small images. This requires combining many images into one and then restructuring your display and load logic to use the sprites. Search for CSS sprites on Google to see how this is done.
Preload the 500 images. If the URLs are known ahead of time, you can preload the images into an array of Image objects using javascript. Then, when they are added to the DOM, they will all come from the browser cache rather than over the network.
Restructure your display logic to load thumbnails on demand rather than load them all at once. Since I'm guessing that all 500 are not displayed on screen at once, the ones that are scrolled off the screen can be loaded upon demand later when their area of the screen scrolls into view. There are libraries that help with such on-demand loading.

The most efficient and fast method would probably be a combination of sprites and preloading.

endyourif · Accepted Answer · 2011-10-17 15:02:43Z

0

It looks like you are doing two loops, one to first populate thumbnail_list and then to create the image. You could probably merge it all into the pop function:

function pop(index,value) {
    if (typeof thumbnail_list == 'undefined') {
        thumbnail_list = {};
    }
    thumbnail_list[index] = value;

    $("#"+index).attr("src",value);
}

answered Oct 17, 2011 at 15:02

endyourif

2,20220 silver badges33 bronze badges

1 Comment

joedborg Over a year ago

That's defying the point of what I desire though. They need to be separate functions

vzwick · Accepted Answer · 2011-10-17 15:12:19Z

0

As a minor optimisation, since you don't seem to mind cluttering the global namespace anyways, I'd suggest this:

var thumbnail_list = {};

function pop(index,value) {
    /* one less check to run, yay? */
    thumbnail_list[index] = value;
}

As for your render() function - you could do the whole thing with vanilla JS instead of jQuery. Not quite sure about the real-world performance impact, though:

function render() {
    for (index in thumbnail_list) {
        document.getElementById(index).src = thumbnail_list[index];
    }
}

edited Oct 17, 2011 at 15:12

answered Oct 17, 2011 at 15:06

vzwick

11.1k5 gold badges47 silver badges63 bronze badges

Collectives™ on Stack Overflow

Speed up iteration over array javascript / jquery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related