我有各种尺寸的图像，我希望延迟加载它们。例如：（没有延迟加载）
<img src='200x200.jpg' />
（带有延迟加载）
<img class='lazy' src='16x16loading.gif' data-original='200x200.jpg' />
<script type='text/javascript'>$('img.lazy').lazyload();</script>
在成功加载它们之前，我想在其位置显示加载 gif。但是，我也希望它的尺寸在图像完成加载之前稳定到所需的尺寸，但不是 gif 尺寸本身，因为低清晰度 gif 放大后会非常难看。
因此，将上述内容转换为要点：
- 添加
width=200px会将旋转的 gif 拉伸成一个非常难看的大的。 - 不这样做将使旋转的 gif 仅占用 16x16 的空白，直到加载 200x200.jpg。
- 将16x16loading.gif制作成200x200.gif（根据我自己的菜鸟尝试），文件大小从 1.7kb 增加到 14.8kb，增加了 770%。
那么有没有办法在其原始尺寸中显示旋转加载 gif，但让它占用我喜欢的尽可能多的空白，可能使用 CSS？