Effective and popular lazy load?

Question

JavaScript

Sometimes it is not possible to optimize all the images on the site, and the requirements for page loading speed are getting tougher and tougher.
On advice I use Echo.js lazy load . And everything seems to be fine.
There are a lot of plugins and small pieces of code for lazy load on the network, in connection with this.
Question: What kind of lazy load do you use, such that it optimizes the speed and is as cross-browser friendly, easy to use and preferably displays a preview on the background (in the form of a gray background or another)?

Answer 1

Progressive jpeg, it first displays an image in poor quality, then in good quality, there are plugins for web servers that do this on the fly, then enable spdy, use one domain / subdomain for static.
There is such an option:
img src="grey.png" data-full="big-image" width=100 height=100
images = document.getElementsByTagName('img')
for (image of images) {
if (image.dataFull) {
image.src = image.dataFull
// for those who have download failure on mobile internet
image.onerror = () => image.src = image.dataFull
}
}
But it will not work normally, browsers themselves are good at optimization, and for example, it works normally with a bad connection, but at the same time I have not seen custom implementations that work adequately on a bad Internet. Yes, and it is unlikely that they will, because there is no normal api that determines whether there is a network or not, to freeze the download and start it again when it appears. Next, you need to figure out how many connections can be simultaneously open to the server and how to optimize the time it takes to connect to the server.