Lagos, Nigeria
info@ezefidelity.com

How to Lazy Load Website Contents with HTML.

How to Lazy Load Website Contents with HTML.

Lazy load is a feature that stoppes web browsers from downloading contents which users have not scrolled to the point of seeing.

As a user visit a website, the browser of the user will try to download all the content of the website so that the users will be able to see all the content of the web page even if they lost data connection after the page load completely.

But it has been noticed that most times, the browser download contents, especially images and iframe contents which the user will end up not viewing. In effect, this will cost the user more internet bandwidth. Lazy load is a feature that website developers can implement on their site in order to fix this problem.

How to Implement Lazy Load Function

As of now, the Lazy Load function I am about to share with you can only be implemented on images and iframes. It is because, this lazy load function is an HTML attribute which is still under development, but popular browsers have started to support it.

Hence, you no longer need an advance JavaScript knowledge to implement Lazy Load. To lazy load images or iframes, add the following HTML attribute to either the image or iframe tag you want to lazy load.

loading=”lazy

Example:

<img src=”https://ezefidelity.com/example/Icon-1.png” loading=”lazy” />

Or

<iframe src=”https://ezefidelity.com/” loading=”lazy” />

Once done, the browser will only download the content when the user scroll down to the point where the image or iframe is located.

Lazy Load Values

The loading attribute used for implement lazy load has only two values, as of now. These are:

  • eager to tell the browser to load the image without waiting
  • lazy to tell the browser to wait till the user scroll to the image or iframe point before loading it.

Why the eager Value is Necessary

You might be wondering, why the eager value. If I do not want an image or iframe to lazy load, is it not as simply as not including the loading attribute in either the img or iframe tag?

Well, you are right. But that is not always the case.

You see, some developers, in order not to forget adding the loading attribute, but setup a function in header to add the loading attributes with the lazy value in all images and iframe in the page.

Hence, then will need to manually add the loading=”eager” to images or iframe that they do not want the browser to lazy load, else, that content will be lazy loaded.

Stay Informed

Like I said, the Lazy Load HTML function is still under development, you can follow the development process in GitHub, or you can just follow me on my social media platform, and I will update you when new information reaches me.

Happy coding!



Do you find this article helpful? Your Friend might too. So, please Share it with them using the Share button above.
Will you like to get notified when I post new updates? Then Follow me on any of my social media handles: Google News, Telegram, WhatsApp, Twitter, Facebook, Pinterest.
You can also drop your email address below if you wish to be notified by mail.


Tags:

%d bloggers like this: