Discussion on "Implementing image lazy loading to improve website performance using JavaScript"

David Jaja · 2022-11-16T09:09:38.840Z

You know that feeling of logging into a website but having to wait an extra few seconds before you can efficiently navigate the page because the images haven't loaded completely? Annoying, right? 😅 Well, this situation typically occurs based on one ...

Hello, The question is not about lazy loading. Just wanted to ask u a question .I don't know how to approach JS projects.. totally confused. I was a beginner. Can u give me any advice??

First, if you have a project in mind, I suggest you outline all the processes in writing i.e. all the functionalities your application will have. Next, you think of how each functionality will work and the logic behind it. You can even draw a flowchart of your whole application (something I do 😂) if you like. Don't worry, your flowchart wouldn't be perfect but it'll help you visualize your whole project better. At this point, you should have a better overview of how your application would work and be able to start building. Keep in mind that you may experience bugs while building, but with enough determination (and googling 😂), you should be able to build your projects.

👏 great read! I'd like to add that a tiny base64 image can be a good blurry preview image which can be embedded in the html saving on round-trips for the previews or alternatively blurha.sh (used by e.g. Unsplash) which is similar but a little more involved.

And also consider addint a <noscript> with a decent version for when JS is disabled or fails for whatever reason, degrading loading but improving the UX 😉

Yeah, I'd consider all these. Thanks for your feedback! Much appreciated. 😉

Thanks for sharing, very helpful!

Very nice article, i enjoyed it.

This is super awesome Jaja, well done👏🏾

A well written article David Jaja. Intersection Observer is amazing. I have written an entire article covering various use cases of intersection observer with multiple demos: bit.ly/3TJOPu8

Or just add loading="lazy" to the images.

Then you don't need any css or js

Yeah, but using loading="lazy" isn't as flexible as using JavaScript's Intersection Observer to lazy-load images. Thanks for the feedback.👍

David Jaja I disagree. It's much better, as it will adjust it's behavior based on the users devices settings (data/battery saver) and current network connection.

And it works beautifully with srcset and picture element, SEO, etc.

Eric Kwoka Well, there are a variety of ways you can implement image lazy-loading, whatever method you choose is entirely up to you.

A well-detailed article. It was an interesting read

Thanks, I really appreciate your feedback.👍

Amazing article, this was very helpful with going into details and explaining everything so well. Thank you

Amazing write-up!. Thank you for being so helpful.

Great Job David….this was an interesting read

Great concept Daiveed. It was a lovely and inspiring read.

Discussion

Implementing image lazy loading to improve website performance using JavaScript

Responses(12)

Recent in Forum

Search Hashnode

Implementing image lazy loading to improve website performance using JavaScript

Responses(12)

Recent in Forum