Single Page Architecture: Is lazy loading images the solution to an image-laden site?

JavaScript
1

I’m learning to use an SPA architecture call AngularJS. I’m concerned whether SPA is a good way to go if the site is heavy on images. Since it loads one page, won’t it take a long time to load if it has to load a hundred 500px square images?

Is lazy-loading the best way to address this problem? (When I get more proficient at AngularJS then I’ll be able to test for myself.)

Lazy-loading example for the uninformed:

2

On another board someone was wondering why their image gallery with thumbnails was taking so long to load. Turned out it was lazy loading 35 MB of full-sized images, most of which may never be viewed. Bad idea.

3

Mine is a page of 20 x 500px images. A slightly different use case! :slight_smile:

4

Hey Steve,

It depends on the structure of your site as to when the images will be loaded. If the page with your images is loaded as a template using ngView, then the browser won’t start downloading the images until that template is inserted into the page.

5

That answers my question! Thanks!