Lazy Loading Images with Vue.js Directives and Intersection Observer
When I think about web performance, the first thing that comes to my mind is how images are generally the last elements that appear on a page. Today, images can be a major issue when it comes to performance, which is unfortunate since the speed a website loads has a direct impact on users successfully doing what they came to the page to do (think conversation rates).
In this article I’d like to cover the same topic using data attributes, Intersection Observer and custom directives in Vue.js.
What this’ll basically do is allow us to solve two things:
Store the src of the image we want to load without loading it in the first place.
Detect when the image becomes visible to the user and trigger the request to load the image.
Same basic lazy loading concept, but another way to ...