如何在 HTML 字符串延迟加载中制作所有图像？
[英]How to make all Images in an HTML String Lazy Load?
问题描述
Our website stores HTML content for our pages in our database like a CMS.
我们的网站将我们页面的 HTML 内容存储在我们的数据库中，就像一个 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.我想知道如何强制该字符串中的任何图像延迟加载，但我也想包含图像的一个版本，以防用户未启用 javascript。
Is there a way to replace all images in the string as follows:有没有办法替换字符串中的所有图像，如下所示：
find: <img src="URL" class="CLASSES" alt="ALT" title="TITLE">查找： <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>替换： <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.或者，我们使用 TinyMCE 作为 HTML 编辑器。 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?有没有办法将我们内容中的任何图像保存为<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">什么时候在编辑器中显示？
1 个解决方案
解决方案1
0 已采纳 2019-02-08 02:53:18
@dev101 提供的这篇文章创造了奇迹： https ://tehnoblog.org/wordpress-theme-image-lazyload-tutorial-with-adaptive-height-placeholders/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.