Starting today, (almost) all the thumbnails below the fold on Air Mozilla are not loaded.
The way it works, is that I use a library called Lazyr.js which notices when you scroll down and when certain pictures are going to be in view, it changes the <img>
tag's src
.
So it basically looks like this:
<article>
<h3>Event 1</h3>
<img src="event1.png">
</article>
<article>
<h3>Event 2</h3>
<img src="event2.png">
</article>
<article>
<h3>Event 3</h3>
<img src="event3.png">
</article>
<article>
<h3>Event 4</h3>
<img src="placeholder.png" data-lazyr="event4.png">
</article>
<article>
<h3>Event 5</h3>
<img src="placeholder.png" data-lazyr="event5.png">
</article>
<article>
<h3>Event 6</h3>
<img src="placeholder.png" data-lazyr="event6.png">
</article>
That means that to load this page it needs to download, only:
event1.png event2.png event3.png placeholder.png
Only 4 images instead of the otherwise 6 (in this example).
When you scroll down to see the rest of the list, it then also downloads:
event4.png event5.png event6.png
The actual numbers on Air Mozilla is that there are 10 events page page and I lazy load 6 of them.
You can see the results when comparing this WebPageTest with this one.
There is more work to do though. At the moment, the thumbnails in the sidebar (Trending and Upcoming events) are above the fold when you're browsing but below the fold when you're viewing an individual event. That's something I have yet to implement.
Comments