内联/编码的 SVG 作为延迟加载占位符答案

【问题标题】：Inline/Encoded SVGs as Lazyload placeholder内联/编码的 SVG 作为延迟加载占位符
【发布时间】：2015-09-05 06:24:50
【问题描述】：

我正在使用延迟加载器通过 Javascript 将 <img> 占位符替换为真实图像。

在响应式网站上使用占位符图像（通过 CSS 覆盖 width 和 height 属性）会导致内容跳转，当加载了不同比例的真实图像时。所以我的计划是插入带有最终图像尺寸的简单内联 SVG 代码。

这是个好主意吗？
如何处理<img> 和<svg> 标签？（需要作为预加载器占位符）

[编辑以获得更清晰的说明——感谢@Robert Longson]

【问题讨论】：

我认为您需要提出一个更好、更具体的问题。目前有人可以用“是”或“否”来回答这个问题，大概这两者都对你没有太大帮助。

标签： html css svg responsive-design lazy-loading

【解决方案1】：

appelsiini.net 延迟加载

$("img.lazy").lazyload({
    effect      : "fadeIn",
    placeholder : "" // null or free
    //placeholder   : "loading.gif"
});

img.loading  {
    background: transparent url(../image/load.gif) no-repeat center center; 
}

<img class="lazy loading" ... />

【讨论】：

请详细解释一下解决方案是什么。