如何使HTML字符串延迟加载中的所有图像？

Question

我们的网站像CMS一样在我们的数据库中存储页面的HTML内容。

我想知道如何强制该字符串中的任何图像延迟加载，但是我还想提供该图像的版本，以防用户未启用JavaScript。

有没有一种方法可以替换字符串中的所有图像，如下所示：
找到：<img src="URL" class="CLASSES" alt="ALT" title="TITLE">
替换：<img data-src="URL" class="CLASSES lazy" alt="ALT" title="TITLE"><nosource><img src="URL" class="CLASSES" alt="ALT" title="TITLE"></nosource>

或者，我们将TinyMCE用作HTML编辑器。有没有一种方法可以将内容中的任何图像另存为<img data-src="URL" class="CLASSES lazy" alt="ALT" title="TITLE"><nosource><img src="URL" class="CLASSES" alt="ALT" title="TITLE"></nosource>，但在编辑器中显示时将内容中的图像显示为<img src="URL" class="CLASSES" alt="ALT" title="TITLE">？

Answer 1

@ dev101提供的这篇文章确实令人惊奇： https://tehnoblog.org/wordpress-theme-image-lazyload-tutorial-with-adaptive-height-placeholders/