Lets say I have an ecommerce site with 15,000 image elements to insert into the html, whats the most efficient method using javascript to increase efficiency and user experience?
Asked
Active
Viewed 124 times
-8
-
1more to the point, why? – Prisoner Nov 03 '15 at 10:14
-
4Wow I would be curious to understand why you need so many images in a single page? – ghybs Nov 03 '15 at 10:14
-
3Create a sprite for all CSS related images – Satpal Nov 03 '15 at 10:15
-
3How about this - don't load 15,000 images onto a sigle page. – pablochan Nov 03 '15 at 10:17
-
Either a huge sprite or defer load them when needed. Also, pagination. – damiano celent Nov 03 '15 at 10:17
-
1Is the end-user interested in seeing all 15000 images? – Salman A Nov 03 '15 at 10:18
-
Do you really want to display 15.000 images on one page? Or do you want to first display a limited number of images? Please elaborate. – Björn Boxstart Nov 03 '15 at 10:33
-
no i dont need 15000 on one page, i just want to know the fastest way to load images only when they are in the viewport – caffeinescript Nov 03 '15 at 10:37
-
Ok so it sounds more like you have a base of 15k items and you are asking for a website architecture to enable visitors browsing through them? JavaScript may be just a part of the answer in that case. – ghybs Nov 03 '15 at 12:08
2 Answers
0
Load the images only when they are in the view port.
This question tells you how:
How do you make images load only when they are in the viewport?
0
Preload the images and use the cdn to host your images.
You can use something like https://github.com/thinkpixellab/PxLoader to preload the images.
Ali Raza
- 147
- 1
- 10