Performance Tips

If you have a very big gallery, with a lot of images, you need to take care of the performance. Justified Gallery has different options to tune it.

Avoid showing the gallery while the JavaScript is loading

The images could be inside the HTML page even before the JavaScript is loaded. In this case those images will be shown without the correct justified layout. Justified Gallery hides the entries as soon as init() runs, but that could still be some milliseconds later due to network latency.

To avoid this problem, put the justified-gallery class on the gallery element in your HTML (and load the stylesheet in the <head>). With this class the stylesheet hides the entries right away, and each one fades in only once it has been laid out in its row.

Fast layout building with waitThumbnailsLoad: false

By default Justified Gallery needs to load each thumbnail to know its size, and it builds the rows in order, so a row can’t be shown until all of its images (and the ones before them) are loaded. That means that, if the browser decides to load the last images of a gallery before the first ones, Justified Gallery waits longer than necessary for the images of the first rows.

To speed up the loading phase you can set the option waitThumbnailsLoad to false. It’s important to remember that this option only has an effect on the thumbnails that have the width and height attributes (the others are still loaded first). For example:

<img src="path/to/img.jpg" height="70" width="105" />

Using this option the layout is built immediately, and the thumbnails appear as they load. This leaves empty spaces during the loading phase, of course, but it reduces the time before the gallery is shown.

Using waitThumbnailsLoad: false is the best way to architect the gallery, and this approach is widely adopted in professional solutions. But, of course, it requires extra work on the backend side, since you need to output the image URL as well as the height and the width.

Choosing the right initial thumbnails

Justified Gallery has been built to load only the thumbnails that are needed, neither too big nor too small. But you control the initial thumbnails written in the HTML page. 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 choose a small rowHeight (e.g. 70). This means that we can put small thumbnails in our HTML (e.g. ones with a height close to 75px). In this way the thumbnails are loaded quickly, and only once.

On the contrary, if we want a gallery with big thumbnails, do we need to put big thumbnails in the HTML? The answer is probably no, because in this way the images may take a long time to show up. With small thumbnails (but not too small), the gallery is loaded quickly. As a side effect they are first scaled up, and they may look low quality for a few seconds, but when Justified Gallery loads the bigger ones they are swapped in without creating holes in your image wall.

However, if you want the thumbnails to be shown immediately with high quality, no matter the time needed for the gallery to show up the images, you can always put in the HTML thumbnails with a height that is close to the gallery’s row height.