How to make all Images in an HTML String Lazy Load?

Question

Our website stores HTML content for our pages in our database like a CMS.

I am wondering how to force any image within that string to lazy load, but I also want to include a version of the image in case the user does not have javascript enabled.

Is there a way to replace all images in the string as follows:
find: <img src="URL" class="CLASSES" alt="ALT" title="TITLE">
replace: <img data-src="URL" class="CLASSES lazy" alt="ALT" title="TITLE"><nosource><img src="URL" class="CLASSES" alt="ALT" title="TITLE"></nosource>

Or, we are using TinyMCE as an HTML editor. Is there a way to save any images in our content as <img data-src="URL" class="CLASSES lazy" alt="ALT" title="TITLE"><nosource><img src="URL" class="CLASSES" alt="ALT" title="TITLE"></nosource> , but show the images from the content as <img src="URL" class="CLASSES" alt="ALT" title="TITLE"> when displayed in the editor?

Answer 1

@dev101 提供的这篇文章创造了奇迹： https ://tehnoblog.org/wordpress-theme-image-lazyload-tutorial-with-adaptive-height-placeholders/