javascript - 通过延迟图像来加快页面加载速度

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

他基本上是在建议同样的事情，只是通过使用微小的 Base 64 编码图像，他可以将图像标签直接放置在 HTML 中，这样做的好处是能够单独控制高度、宽度、alt 等属性。与在脚本中创建整个图像标记相比，以这种方式维护 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>