通过延迟图像加速页面加载

Question

我正在创建一个包含大量大图像的页面,所以我自然希望确保页面加载没有太多麻烦.我在这里阅读这篇文章http://24ways.org/2010/speed-up-your-site-with-delayed-content

推迟的方法如下(从页面中提取,不介意URL)

<div>
    <h4>
        <a href="http://allinthehead.com/" data-gravatar-hash="13734b0cb20708f79e730809c29c3c48">
            Drew McLellan
        </a>
    </h4>
</div>

然后一段js负责图像加载

$(window).load(function() {
    $('a[data-gravatar-hash]').prepend(function(index){
        var hash = $(this).attr('data-gravatar-hash')
        return '<img width="100" height="100" alt="" src="http://www.gravatar.com/avatar.php?size=100&amp;gravatar_id=' + hash + '">'
    });
});

我不打算为每个图像执行此操作,但对于某些我不需要在页面加载时显示的图像.

这是最好的方式还是有更好的方法通过延迟图像来实现更快的页面加载？

谢谢

Answer 1

有点晚了,但如果它对其他人有所帮助,Patrick Sexton就这个主题发表了一篇很棒的文章 https://varvy.com/pagespeed/defer-images.html

他基本上建议同样的事情,只使用微小的64位基础编码图像,他可以将他的图像标签直接放在HTML中,这样可以单独控制高度,宽度,高度等属性.与在脚本中创建整个图像标记相比,以这种方式维护HTML要容易得多.

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="image1.jpg" alt="image 1">
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="image2.jpg" alt="image 2">

然后,您的脚本对于所有图像都是简单且通用的

<script>
function init() {
  var imgDefer = document.getElementsByTagName('img');
  for (var i = 0; i < imgDefer.length; i++) {
    if (imgDefer[i].getAttribute('data-src')) {
      imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
    }
  }
}

window.onload = init;
</script>

Answer 2

这似乎是推迟图像的非常干净的方式。唯一的潜在问题是图像是否带有重要信息，因为“数据属性是 HTML5 中的一项新功能”。

另一种选择是将图像放在正文的末尾并使用 CSS 来定位它们。我个人会坚持使用 javascript。