Lazy Loading images with Vue.js directives and IntersectionObserver
This article was inspired and based on this great blog post written by Benjamin Taylor.
When I think about performance and how the websites are loaded the first thing that comes to my mind is that when the content is loaded the last elements that appear on the page are images.
Today images (their size and number on a single page) can be a major issue when it comes to performance. Keeping in mind that the page load of a website has a direct impact on the conversion rate, this issue should not be ignored.
In this article I would like to describe one way of reducing that initial weight of a website. What I will demonstrate is how to load only the content visible for the user when she/he sees the initial view and lazy load all the rest of the heavy-weight elements (like images) only when required.
To do that we need to solve two things:
- How to store source of the image we want to load without loading it in the first place.
- How to detect when the image becomes visible (is required) to the user and trigger the request to load the image.
We will solve the above mentioned issues using data-attributes, IntersectionObserver and Vue.js custom directive.
