How to implement smooth display of images on the site?

Question

MODX

Developed a one-page site on modx Revo. Website - portfolio design studio. As in any portfolio, the main part of the site is occupied by images.
At the time of loading the site, the images are not loaded beautifully, scattered, and drawn for a long time.
Previously, somewhere I found how to implement a smooth loading of images on the visible part of the page, when the page was scrolled, the images appeared smoothly.
I tried again to find something similar - all the options did not lead to anything worthwhile. Either the images were not partially loaded, or the redrawing was even slower.
Now the site looks like this chetkodesign.ru
Please unsubscribe to those who have already met with such problems, they are interested in how to implement smooth loading of images.

Answer 1

lazy load? www.appelsiini.net/projects/lazyload

Answer 2

Yes. something I'm a little dumb. I refused it because there all images are indicated not in src but in data-original. I thought that not all browsers hold it and glitches will begin ... Now I still think so too, but I think it's worth a try. I would like the site to remain cross-browser friendly. + those who have scripts turned off will not see the works at all. But in principle, my entire site is based on jquery, and this already says that nothing will work for it anyway ..
Thank you! I'll try it. I tried to hide images myself through fadein and show them on the .load event before. but I began to notice that when the page is refreshed, not all images are shown, some were not displayed.

Answer 3

The site is tight.