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

I am creating a page which will contain a lot of large sized images, so naturally I want to make sure the page loads without too much trouble. I read this article here http://24ways.org/2010/speed-up-your-site-with-delayed-content

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

The method of deferring is as follows (pulled from page, don't mind the URL)

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

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

then later a snippet of js takes care of the image loading

然后一段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 + '">'
    });
});

I don't plan on doing this for every image but definitely for some image which I don't need it to show up at page load time.

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

Is this the best way to go or are there better ways to achieve faster page load by deferring images?

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

Thanks

3 个解决方案

#1

A little late, but in case it benefits others, there is a great article on this topic by Patrick Sexton https://varvy.com/pagespeed/defer-images.html

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

He basically is suggesting the same thing, only by using tiny base 64 encoded images, he can place his image tags directly in the HTML which has the benefit of being able to control attributes like height, width, alt, etc individually. It will be a lot easier to maintain your HTML this way as opposed to creating the entire image tag in a script.

他基本上建议同样的事情,只使用微小的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">

Then your script is simple and generic for all images

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

<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>

#2

This seems to be pretty clean way of deferring images. The only potential problem is if images carry important information as "Data attributes are a new feature in HTML5".

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

Another option could be to put images to end of body and use CSS to position them. Personally I would stick to javascript.

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

#3

Here's a version showcasing .querySelectorAll:

这是展示.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();
}

Here is the compatibility table for .querySelector and .querySelectorAll via https://caniuse.com/#feat=queryselector

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

#1