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:
- Insert
width
andheight
attributes as described above - Replace all
src
attributes withdata-gridzylazysrc
as shown below (if you havesrcset
attributes as well, replace them withdata-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.