How To Lazy Load Your Images With Just One Line Of Javascript

Lazy loading images means loading images on websites asynchronously — that is, after the above-the-fold content is fully loaded, or even conditionally, only when they appear in the browser’s viewport. This means that if users don’t scroll all the way down, images placed at the bottom of the page won’t even be loaded.
Sitepoint

The Situation

Think you have an image called my-image.png that takes 5 seconds to load, and you throw in an img tag to your site like:

<img src="my-image.png">

That will add 5 seconds, more or less to your site’s load time. You don’t want that to happen, do you? But you can’t just go on and delete your image from your site and pretend that nothing had happened. Then how can I make my site faster but keep the images?? The solution to this problem is called Lazy Loading!

Lazy loading (also known as asynchronous loading) is a design commonly used in computer programming and mostly in web design and development to defer initialization of an object until the point at which it is needed
Wikipedia

Solution

So how can I lazy load my images??

To lazy load your sites images, you need to use a little JavaScript. Don’t worry!! It’s easier than you think, thanks to an amazing library called Lozad.js.

To use this library, you just have to put the following at the end of your html file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lozad.js/1.16.0/lozad.min.js"></script>
<script>lozad().observe();</script>

And add the class lozad to your img elements, then change the src attribute to data-src:

<img class="lozad" data-src="my-image.png">

Finally, see the magic work!

You will see that the image will start loading after you scroll down to it. This will improve your site’s initial load time.

Live Example: Go to my site, and scroll down to the Latest News section. You will see that the thumbnails load after you scroll down to them. (and if you want source code of that site - https://github.com/Dev-I-J/JNote-Site)

PS: Sorry for the bad grammar (or whatever).

10 Likes

Nice article! This is especially good for sites that have a lot of load time because of high amounts of images.

2 Likes

What about WordPress?

I am guessing you cannot do it in wordpress as you cannot edit your code.

3 Likes

nice work there.

1 Like

you can edit with a plugin tho

3 Likes

w3 has a lazy load function/option

5 Likes

LOL this is exactly what I did with my portfolio.


(It’s for my repl.it profile)
4 Likes

Thanks For All Your Replies! :grinning_face_with_smiling_eyes:

2 Likes

in case if you weren’t aware:

1 Like

It’s supposed to do that lol. It types out the link then converts it to html.

For added effect.

3 Likes

Ah lol, btw your website is cool.

4 Likes

Thanks! It comes with an error reporter too. Works 100% offline (except for site views and profile data).

1 Like

Nice.

1 Like

Here, I use jQuery lazy load:

Check it out here: http://sjscustomcakes.rf.gd/
Click on the image icon and scroll down!

2 Likes

Good Article @Dev-I-J
@Thewebuser22 btw i love bacon.

1 Like

ah yes, I love a 301 redirect to http://suspended-website.com/i/

lol, I have a new domain: (I’ll change it again)

You can edit WordPress html. Either by using a plugin called insert headers and footer or by clicking on theme editor. If that doesn’t work then just go to htdocs/wp-content/themes/your-theme/footer.php or header.php depending on where you want to edit. But yeah the customization features are limited.

2 Likes

Just to aware people who use IntersectionObserver and MutationObserver in JS, you may want to create/include a polyfill for those two if you want to support much old browsers because this feature is modern :slight_smile: