支持在 Markdown 中为图片添加延迟加载答案

【问题标题】：Support for adding lazy load for images in Markdown支持在 Markdown 中为图片添加延迟加载
【发布时间】：2015-11-16 02:26:21
【问题描述】：

我正在使用 kramdown 解析器将 markdown 转换为 html。我想在不修改原始降价语法的情况下对图像使用延迟加载。我可以通过在 kramdown gems 中编辑 link.rb 文件来实现这一点。

但我不想这样。因为如果有人更新 kramdown 我会丢失这些编辑。有没有其他方法可以在不修改原始图像语法的情况下做到这一点？

原始图像语法：![](some image link)

当前输出（没有上述编辑）：<img src="some image link" alt=""/>

预期输出：<img data-src="some image link" alt=""/>

【问题讨论】：

我认为您对src vs data-src 有点困惑。后者只是一个“不可见”的 html 容器，通常用于 javascript。它并不是真正的懒加载。您仍然需要通过一些 AJAX 调用来连接它，但在这种情况下，您可以轻松更改 html 的 src。 src 属性的 JavaScript 更新可能是您问题的答案所在。
@engineerDave 我将使用lazyload插件来完成这个技巧。但是我这里没有提到...

标签： ruby markdown jekyll jekyll-extensions kramdown

【解决方案1】：

您可以使用 Nokogiri 更改生成的 HTML，这几乎是您完成任务所需的所有代码。

def responsive_img_src(html_source)
  doc = Nokogiri::HTML::Document.parse('<html></html>', nil, 'UTF-8')
  fragment = Nokogiri::HTML::DocumentFragment.new(doc, html_source)
  fragment.css('img').each { |img| img['data-src'] = img['src'] }
  return fragment.to_html
end

您不能直接使用Nokogiri::HTML(html_source) 来解析您的源代码，因为它会将输出包装到格式良好的 HTML 文档中。这就是您需要 DocumentFragment 的原因。

【讨论】：

【解决方案2】：

如果您使用kramdown，您可以将属性添加到您的降价块。 See documentation

在您的情况下，An image: ![gras](){: data-src="some image link"} 可以解决问题。

【讨论】：

是的。我知道这种语法。但是我有大量的降价文件。我可以使用正则表达式替换现有的图像语法。将来我不确定组织中的每个人都会遵循这一点。所以我想使用默认语法