How to achieve lazy loading of pictures for html code that has been written?

how to achieve lazy loading of pictures for html code that has been written?

for example, many articles have been written, and many pictures have been applied to each article, which have been stored in the database. Now we need to revise them to achieve lazy loading of pictures

.

methods you have tried

find out all the image,src replaced by the loading diagram, and add the attribute data-src to the initial src address. When the browser scrolls to the visual area, replace data-src to src.

.

what result do you expect? What is the error message actually seen?

I expect whether there are better ideas or libraries that exist in the community to solve this problem, which will be very complicated if I try.

May.11,2021

actually your method is very good

if you find it troublesome, you can use nodejs to deal with it in batches, which will be very fast.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3f0e4-2c477.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3f0e4-2c477.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?