Html 微小图像占位符；多个base64或单个1x1gif

tl；dr：最佳占位符图像，HTML或1x1 gif图像中的微小base64代码？

我正在建立一个包含许多高分辨率图像的公文包网站。大多数都包含在幻灯片或隐藏的div中。因此，我在页面中添加了一个简单的延迟加载函数

这一切都可行，但我想知道加载占位符图像的最快方法是什么。因为我被告知永远不要将src属性留空

我在互联网上发现了一个非常小的base64图像代码，我正在使用它。但该网站包含许多图像，因此浏览器现在正在解码每一幅base64图像。看起来也不是很有效率

使用单个非常小的1x1 gif图像会更有效吗？还是会增加更多的网络请求

最理想的解决方案是什么

以下是代码，与我的问题几乎无关：

<div class="slide">
  <button> Click to load images </button>
  <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://lorempicsum.com/up/627/200/3" alt="" />
  <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://lorempicsum.com/nemo/627/300/4" alt="" />
  <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://lorempicsum.com/up/627/300/4" alt="" />
</div>

和一个jsfiddle：

---

为什么要使用base64编码？编码图像较大，因此加载时间较长。但是，如果您从a向b发送电子邮件，则必须将图像嵌入电子邮件中。这就是为什么可以在html中嵌入图像。电子邮件必须按照标准进行编码，其中一个标准是base64。

使用

和

背景图像

它们加载速度更快（至少感觉更快），但如果您担心可访问性和/或搜索引擎优化，请使用您已经拥有的。我稍微优化了jQuery：

• 使用

  .lazy

  代替

  [data src]

  类选择器比属性选择器更快
• 获取或设置

  数据-*

  属性时，最好使用更新的方法，使用

  .data（）

  而不是

  .attr（）

• 背景图像

  属性可以通过

  .css（）

  方法进行操作

一小条

$.fn.lazyLoad=函数（）{
var lazy=$（this.find（'.lazy'）；
lazy.each（函数（索引）{
var data=$（this.data（'src'）；
$（this.css）({
“背景图像”：“url（“+data+”）”
});
});
}
$（'.slide'）。在（'click'，function（）上{
$（this.lazyLoad（）；
});
.lazy{
宽度：627px；
最小高度：200px；
背景重复：无重复；
背景尺寸：包含；
}

单击以加载图像
谢谢！我必须考虑使用背景图像，SEO是重要的。在索引页面之前，google不会在页面上运行javascript吗？或者所有背景图像都被忽略了？不幸的是，背景图像不被认为是内容唯一的表示，所以它们被忽略了。
$.fn.lazyLoad = function(){
    var lazy = $(this).find('img[data-src]');
  $(lazy).each(function(index){     
        $(this).attr('src', $(this).attr("data-src")); 
  });
};

$('.slide').click(function(){
    $(this).lazyLoad();
});