If you have a very big gallery, with a lot of images, you need to take care about the performances. Justified Gallery has different options to tune the performances.
will be shown without the correct justified layout. Justified Gallery will immediately hide the gallery as soon
as it starts, but that could still be after some milliseconds due to network latency.
To avoid this problem you can put the
justified-gallery class to the gallery. This CSS class will
immediately hide the gallery, which will only show after that all images are loaded and that the layout is ready.
waitThumbnailsLoad = false
By default Justified Gallery waits that all the images of a row are loaded before showing it. That means that, if the browser decides to load the last images of a gallery before the first ones, Justified Gallery waits more than the necessary for the images of the first rows. This means that it may wait a lot before showing the first rows.
To speed up the loading phase you can also set the option
It's important to remember that this option only works if the thumbnails have the height and width attributes.
Using this option the layout is built immediately, and the thumbnails will appear randomly while they are loaded. This generates white holes during the loading phase, of course, but it reduce the loading times.
waitThumbnailsLoad is the best way to architect the gallery, and this approach is widely
adopted in professional solutions. But, of course, it requires extra-works on the backend side, since you need
to output the image URL as well as the height and the width.
Justified Gallery has been built to load only the right thumbnails that is needed, without loading too big thumbnails, and without loading too small thumbnails. But is you that control the initial thumbnails that is written in the HTML webpage. Those thumbnails are automatically loaded by the browser, and if they are inappropriate, they may slow down the loading phase.
If we want a gallery with small thumbnails, we have to choose a small
rowHeight (e.g. 70). This
means that we can put small thumbnails in our HTML (e.g. the ones with an height close to 75px). In this way the
thumbnails can be quickly loaded, and only one time.
On the contrary, if we want a gallery with big thumbnails, do we need to choose big thumbnails? The answer is probably no, because in this way the images may take a long time to show up. Putting small thumbnails (but not so small), the gallery is loaded quickly. As side effect they are first resized to be bigger, and they may appear with a bad quality for some seconds, but when Justified Gallery loads the bigger ones they are replaced without creating white holes in your image wall.
However, if you want that the thumbnails are showed immediately with an high quality, no matter the time needed for the gallery to show up the images, you can always put in the HTML the thumbnails with an height that is closer to the gallery's row height.