Loading images after clicking a button and not before?

HTML & CSS
1

Hello,

I have a large thumbnail gallery which is displayed on one page. Naturally, this page takes very long to load, so I though that it would be nice to show only the first, let’s say 5 rows of thumbnails and then a button “Show more”, just like GoogleImages does. Pressing this button expands the next 5 rows, and so on…

My problem is that even if I set the thumbnails at “display: none”, they are still loaded into the cache, which again takes time. How can I load them only after clicking the button?

2

i would just originally show only five images then use an javascript or ajax call to set to onsubmit of button to load the next row and so on.

3

Yeah, I though about that but I want to avoid to use Ajax.

4

CSS isn’t good with behavioral stuff. There is no way in CSS for you to stop the loading of something because it will bei n the HTML.

Although it will take the page longer to load at first, would you really want users to have to sit there adn wait for the images to load even after the page is supposed to be already loaded?

5

Yeah, you probably right. I just ran into more and more problems. Because, what happens if a user clicks one of the image and views it on a new page and returns back to the thumbnail view? Then I would have to remember which images have already been expanded and which should still be hidden. I will keep the page as it is, so there is a slight delay, but then all the images are loaded for god :slight_smile: