Gridzy.js 2 – Optimize Loading

Gridzy.js 2 itself is a relatively lightweight script, but there are some things you can do to improve the loading process …


Prevent Jumping Images

Gridzy absolutely needs the aspect ratio of all images to calculate the grid. These fact results in jumping elements if some images are ready and others are not. The more images there are, the more annoying can be this effect.

To prevent this behavior, just set width and height attributes for all img elements with the natural image dimensions:

<div class="gridzy">
	<img src="https://placeimg.com/640/480/any?1" width="640" height="480" alt="a random image" />
	<img src="https://placeimg.com/640/480/any?2" width="640" height="480" alt="another random image" />
	<img src="https://placeimg.com/640/480/any?3" width="640" height="480" alt="yet another random image" />
	<img src="https://placeimg.com/640/480/any?4" width="640" height="480" alt="a random image again" />
	<img src="https://placeimg.com/640/480/any?5" width="640" height="480" alt="one last random image" />
</div>

Thereafter Gridzy can calculate the grid immediately without need to know the actually sizes of the images.


Lazy Loading

To load only images which are in the visible viewport, just follow these steps:

  1. Insert width and height attributes as described above
  2. Replace all src attributes with data-gridzylazysrc as shown below (if you have srcset attributes as well, replace them with data-gridzylazysrcset).
<div class="gridzy">
	<img data-gridzylazysrc="https://placeimg.com/640/480/any?1" width="640" height="480" alt="a random image" />
	<img data-gridzylazysrc="https://placeimg.com/640/480/any?2" width="640" height="480" alt="another random image" />
	<img data-gridzylazysrc="https://placeimg.com/640/480/any?3" width="640" height="480" alt="yet another random image" />
	<img data-gridzylazysrc="https://placeimg.com/640/480/any?4" width="640" height="480" alt="a random image again" />
	<img data-gridzylazysrc="https://placeimg.com/640/480/any?5" width="640" height="480" alt="one last random image" />
</div>

After these steps the images will load as soon as they are near or inside the viewport.


If you have many images you may also be interested to filter them in a handy way. Gridzy.js 2 supports a very powerful solution for this. Check out Gridzy.js 2 – Filters.