Slow load time due to many images.

[sDamme]

Hi, I have run into an issue, where I'm trying to load 3 different albums in 3 different areas for a single page website. The only thing is that it makes the initial load time very slow.

The amount of images is up to a 100 or so.

I was wondering if there would be a way to perhaps lazy-load the images, thus slowing down the initial page load time? I'm sure you might be thinking well why do you need a 100 images but the reason is that I'm making a site for tattoo artists and they have quite a lot of images to show.

If anyone has a solution or any ideas. Even if someone could point me in the right direction, then perhaps I could find a solution myself. But having searched for quite a while I haven't come up with anything.

Cheers and best regards.

[dejanstojanovic]

Hi,

I think there is already some lazy loading for images, but it looks like it does not work so perfect for you :( The issue might be also loading of JSON as it loads page by page, which means it makes more than one request to load all for creating the structure. Is is possible somehow that you share the URL of your sample page with the actual album that you are loading so I can try to figure out what might be the issue.

[sDamme]

Hi, Yeah, it's certainly possible. The site name is www.tartoo-tattoo.ee I'm sure you will find many things that make your jaw drop, due to bad coding or such. X_x

[dejanstojanovic]

First thing, try not to load all albums at once. For example, when you click show works then you initialize the album in the container in case there is no photo elements in it, otherwise just show the container as it was loaded previously. I hope this will help. There is really no need to load everything when the page loads.

[sDamme]

Ah okay, Sorry for bothering a bit more but what should I look for / do to achieve that?

Edit: Ah figured it out. Thanks for the help, even tho it was something I should've noticed myself right away

[dejanstojanovic]

Ok, This is the part I was reffering to $(document).ready(function () { $(".fb-album-container").each(function () { ..... )} )}

This will take so much time while initially loading the page. Instead, attach handle to buttons with nav-toggle class. I suggest you add one more dummy class which you will use for the selector. Same class should be on the container which will be used for the album. The rest is as I mentioned in previous message: when expanded load the album if not loaded previously

I hope I helped

[sDamme]

Oh you helped much. :) I actually facepalmed myself a bit later for asking this, it's basic jquery.... I've been working with angular too much lately. :D I think it should be something like this to fire it just once when the toggle gets clicked:

$('#nav-toggle').one('click', function(){

I will experiment with it to find the best solution to that. :) Thanks again.