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

Question

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>

jQuery:

$.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();
});

和jsfield:

jsfiddle

Answer 1

使用<div>和background-image，它们加载速度更快(至少感觉更快)，但如果你关心可访问性和/或SEO，就用你已经有的。我对jQuery做了一些优化:

• 使用.lazy代替[data-src]类选择器比属性选择器更快。
• 当获取或设置data-*属性时，最好使用.data()而不是.attr()。
• background-image属性可以通过.css()方法进行操作。

片段

$.fn.lazyLoad = function() {
  var lazy = $(this).find('.lazy');
  lazy.each(function(index) {
    var data = $(this).data('src');
    $(this).css({
      'background-image': 'url(' + data + ')'
    });
  });
}
$('.slide').on('click', function() {
  $(this).lazyLoad();
});

.lazy {
  width: 627px;
  min-height: 200px;
  background-repeat: no-repeat;
  background-size: contain;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide">
  <button>Click to load images</button>
  <div class="lazy" data-src="http://lorempicsum.com/up/627/300/3"></div>
  <div class="lazy" data-src="http://lorempicsum.com/nemo/627/300/4"></div>
  <div class="lazy" data-src="http://lorempicsum.com/up/627/300/4"></div>
</div>

Answer 2

为什么要使用base64编码呢?编码图像较大，因此有较长的加载时间，然而，如果你从a发送电子邮件到b，那么你必须在电子邮件中嵌入图像。这就是为什么可以在html中嵌入图像。电子邮件必须按照标准编码，其中之一是base64。