如何让一个HTML字符串延迟加载的所有图像？

Question

我们的网站商店HTML内容对我们在我们的数据库就像一个CMS页面。

我想知道如何强制该字符串延迟加载内的任何图像，但我也希望包括万一版本的图像用户不启用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/