如何在 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/