Release 1.0 - Lazy Loading
In this release I have covered one issue that add feature of Lazy Loading images of the blog post. It took me a little bit of time to add this feature and some help from my professor.
What is lazy loading?
When user open a website that consist of many big images and videos it will take some time to load all of them. This could be an issue because some users does not have time to wait until all media will be loaded and simply will just close the application. Luckily there is feature that allowed to load images while user scrolling through the web page.
How do I know if my application uses lazy loading feature?
That is not to hard to check. Here are steps:
- Load web page
- Open developer tools
- Select network
- Navigate to IMG
Under the list of already load pictures (if any or all) there will be usages showing how much resources were used. If during scrolling the page the lower number of used resources is increasing once the image appear in the view its mean application using lazy loading. If all resources were used during the start up its mean that this option is not activated.
How to achieve lazy loading?
There are few ways to do that:
1. Intersection Observer API. Easily helps to detect when the image gets into the viewport. Once image is there API start to take actions (bind events, keep track of performance, check when element enters viewport.
2. lozad.js. This is a lightweight library that is not required dependency for images, iframes and more. This library uses Intersection Observer API as a base.
In order to use this library for lazy loading user has to do next steps:
- npm install --save lozad;
- import lozad from 'lozad';
- const observer = lozad();
- observer.observe();
- change src of the image to data-src;
3. Use native lazy loading. In this case <img> needs to have attribute loading='lazy'.
Telescope is the project that insert feeds and display on its web page. Our main page consist of many posts. This mean that for each post I have to check if there is any images and add attribute to it loading="lazy".
I created a function that will received a plain text (in our case raw html) , create temporary dom ( allowed us to take dom offline and perform changes to the <img>), add attribute loading="lazy" and attach new dom to the tree.
After function created I just simply wrap around our raw html.
Those were only few ways how to perform lazy loading on the application.
How do I know if my application uses lazy loading feature?
That is not to hard to check. Here are steps:
- Load web page
- Open developer tools
- Select network
- Navigate to IMG
Under the list of already load pictures (if any or all) there will be usages showing how much resources were used. If during scrolling the page the lower number of used resources is increasing once the image appear in the view its mean application using lazy loading. If all resources were used during the start up its mean that this option is not activated.
How to achieve lazy loading?
There are few ways to do that:
1. Intersection Observer API. Easily helps to detect when the image gets into the viewport. Once image is there API start to take actions (bind events, keep track of performance, check when element enters viewport.
2. lozad.js. This is a lightweight library that is not required dependency for images, iframes and more. This library uses Intersection Observer API as a base.
In order to use this library for lazy loading user has to do next steps:
- npm install --save lozad;
- import lozad from 'lozad';
- const observer = lozad();
- observer.observe();
- change src of the image to data-src;
3. Use native lazy loading. In this case <img> needs to have attribute loading='lazy'.
Telescope is the project that insert feeds and display on its web page. Our main page consist of many posts. This mean that for each post I have to check if there is any images and add attribute to it loading="lazy".
I created a function that will received a plain text (in our case raw html) , create temporary dom ( allowed us to take dom offline and perform changes to the <img>), add attribute loading="lazy" and attach new dom to the tree.
Those were only few ways how to perform lazy loading on the application.
Comments
Post a Comment