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

Community Guides
24

To edit in Wordpress, edit /htdocs/index.php

1 Like
25

Eh, just saw this post…
It is very easy to lazy-load images in pure html. You just add an extra attribute loading=“lazy” to your image element.
There is a nice description here https://www.w3schools.com/tags/att_img_loading.asp

It’s always smarter to keep your code as simple as possible…

1 Like
26

Here is some better documentation.

In full agreement!

3 Likes
27

Its not supported in safari

28

I just use the loading=“lazy” attribute on a regular img.

1 Like
29

according to w3schools its not supported on safari tho

image
image820×145 13.8 KB

30

sucks to be safari then :rofl:

but seriously thanks for this, i didnt know about the loading attribute

1 Like
31

BTW for people who want a lightweight and simple plugin for WordPress for this. It is Lazy Loading by WP Rocket: https://en-ca.wordpress.org/plugins/rocket-lazy-load/. If you also want image compression: Smush is good but a bit heavier

32

Hi @robertz yes you are right both are the great tools but for image compression I think https://jpegcompressor.com/ is also such a good tool don’t you think that.

1 Like
33

genuis xD

34

I thought jpg was already compressed ?

what does jpegcompressor actually do just re-save the image with a lower quality ?

1 Like