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

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

推迟的方法如下（从页面中提取，不介意URL）

 
  Drew McLellan  
  

然后一段js负责图像加载

 $(window).load(function() { $('a[data-gravatar-hash]').prepend(function(index){ var hash = $(this).attr('data-gravatar-hash') return '' }); }); 

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

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

谢谢

Answer 1

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

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

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

Answer 2

这似乎是推迟图像的相当干净的方式。 唯一可能的问题是图像是否包含重要信息，因为“数据属性是HTML5中的新function”。

另一种选择可能是将图像放到身体的末端并使用CSS来定位它们。 我个人会坚持使用javascript。

Answer 3

这是展示.querySelectorAll的版本：

 function swapSrcAttributes(source) { return function(element) { element.setAttribute('src', element.getAttribute(source)); } } function forEach(collection, partial) { for (var i = 0; i < collection.length; i++) { partial(collection[i]); } } function initDeferImages() { // for images var deferImages = document.querySelectorAll('img[data-src]'); // or you could be less specific and remove the `img` deferImages = document.querySelectorAll('[data-src]'); forEach(deferImages, swapSrcAttributes('data-src')); } window.onload = function() { initDeferImages(); } 

这是.querySelector和.querySelectorAll的兼容性表， .querySelector https://caniuse.com/#feat=queryselector