内联/编码SVG作为Lazyload占位符

Question

我使用lazyloader通过Javascript将<img>占位符替换为真实图像。

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

1. 无论如何这是个好主意吗？
2. 如何处理<img> vs <svg>代码？ （需要作为预加载器占位符）

[编辑更清晰的指示 - 谢谢@Robert Longson]

Answer 1

appelsiini.net lazyload

$("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" ... />