3

I need to dynamically load and put on screen huge number of images — it can be something like 1000–3000. Usually these pictures are of different size, and I'm getting their URLs from user. So, some of these pictures can be 1024x800 or 10x40 pixels.

I wrote a good JS script showing them nicely on one page (ala Google Images Search style), but they are still very heavy on RAM used (a hundred 500K images on one page is not good), so I thought about the option of really resizing images. Like making an image that’s 1000x800 pixels something like 100x80, and then forget (free the ram) of the original one.

Can this be done using JavaScript (without server side processing)?

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
David
  • 3,190
  • 8
  • 25
  • 31

4 Answers4

3

I would suggest a different approach: Use pagination.

Display, say, 15 images. Then the user click on 'next page' and the next page is shown.

Or, even better, you can script that when the user reaches the end of the page the next page is automatically loaded.

If such thing is not what you want to do. Maybe you want to do a collage of images, then maybe you can check CSS3 transforms. I think they should be fast.

Nerian
  • 15,901
  • 13
  • 66
  • 96
  • I have no problem with pagination (appending to bottom). the problem is that I will want to show thousands of images, and I don't want browser to hang or become unresponsive. – David Jan 12 '11 at 07:57
1

What you want to do is to take some pressure from the client so that it can handle all the images. Letting it resize all the images (JavaScript is client side) will do exactly the opposite because actually resizing an image is usually way more expensive than just displaying it (and not possible with browser JS anyway).

Usually there is always a better solution than displaying that many items at once. One would be dynamic loading e.g. when a user scrolls down the page (like the new Facebook profiles do) or using pagination. I can't imagine that all 1k - 3k images will be visible all at once.

Daff
  • 43,734
  • 9
  • 106
  • 120
  • it's the __requirement__... it can be even more then that (~10k). need to think about some creative way out of this – David Jan 12 '11 at 08:00
  • 1
    Yes it will probably have to be a creative way, because that requirement is just not possible to fullfill the way you described it. – Daff Jan 12 '11 at 16:53
0

There is no native JS way of doing this. You may be able to hack something using Flash but you really should resize the images on the server because:

  1. You will save on bandwidth transferring those large 500K images to the client.
  2. The client will be able to cache those images.
  3. You'll get a faster loading page.
  4. You'll be able to fit a lot more thumbnail images in memory and therefore will require less pagination.
  5. more...
nedk
  • 673
  • 3
  • 8
  • images are not on my server. I want to save bandwidth for client, I have no means of knowing the size of image, or even worst, no clue if image really exists. – David Jan 12 '11 at 07:58
  • Then use a proxy. You can't avoid client-side load when the originals are on the client. [Authorship disclaimer] -> [ImageResier](http://imageresizing.net) is a server-side module that can proxy image requests and resize/recompress them on the fly so the client only gets the minimum bytes needed. – Lilith River Jun 16 '14 at 08:26
0

I'm (pretty) sure it can be done in browsers that support canvas. If this is a path you would like to take you should start here.

I see to possible problems with the canvas approach:

  1. It will probably take a really long time (relatively speaking) to resize many images. Because of this, you're probably going to have to look into utilizing webworkers.
  2. Will the browser actually free up any memory if you remove the image from the DOM and/or delete/null all references to those images? I don't know.

And some pretty pictures of a canvas-resized image: Canvas Resize

this answer needs a ninja:--> Qk

Community
  • 1
  • 1
David Murdoch
  • 87,823
  • 39
  • 148
  • 191