Do Many Pop-Up Layers With Photos Affect Page Load Time?

[kevinburke]

Hi WEB DESIGN Forum,

If I have a single page with a good number of pop-up layers and each layer with an image inserted, when that page is first loaded are all the images loading as well? Or are the images loaded only if the individual pop-up layer is viewed? The images would be on my same server not a remote server. Any difference if I use an iframe or simply embed the image into the layer? I don't want to slow down page loading too much so curious what's going on behind the visible portion of the page with the pop-up layers. I'm using XDP 365 and thanks for any suggestions.

Cheers, Kevin

[gwpriester]

Good question. I am not sure. Maybe one of our more tech savvy members will have the answer.

My guess is the images on the layer are downloaded on demand. That is, if the visitor does not click a specific link to a specific layer then those images do not download.

[IanB]

Not a tech savvy answer I'm afraid but a website of mine with lots of pop-up layers seems to be slow :

http://www.pyramidfolk.co.uk/index2.htm

With this website I can't see anyway around it.

[gwpriester]

No problems here with the pop ups. And I cannot think these take up hardly any space.

[kevinburke]

Hi Ian,
Thanks for your reply, actually your site loads very quickly for me here in Barcelona, almost instantaneously. I have a home fiber-optic line so a fast connection . . . . but probably not as fast as the phone company marketing claims, of course!
So, your site is unique for sure, loads of mouse-over affects and pop-up layers, so it's pretty complicated behind the scenes -- simple looking but effective with lots of useful info popping up.

I'm guessing/hoping as Gary above that they don't all load from the server until called-up; I want to use some moderately hi-res photos in the pop-ups but I better know for sure what's happening, especially for visitors on mobile networks.
Thanks again and let's see what the experts say!

Cheers, Kevin

[Acorn]

Every single asset will be downloaded so the page will take a time to finish loading.
If you immediately click on a pop-up image there may be a long delay until it is reached.

It is much much worst for Supersite and Variants - unless extremely lightweight, never mix these together.

It is possible to set up lazy loading for these images but not at all that simple.

Your approach for images on your own server will be the best method.
Create a Placeholder with the right width and height and for its body code simple use something like <img href="..yourServer.photo.png" height="640" width="400">.

Acorn

[kevinburke]

Good Morning Acorn,

Thanks very much for your reply and information, so the pop-up layers will load their content when the parent page loads. Actually I am using a Supersite with mobile variant, a lightweight site for now but will expand it so I should think of converting it to a standard site with page links and individual pages for the content images and text. Thanks for clearing that up for me and helping me avoid a mess with a slowed-down website!

Best Regards,
Kevin