Ускорьте загрузку страницы, отложив изображения

Я создаю страницу, которая будет содержать много изображений большого размера, поэтому, естественно, я хочу, чтобы страница загружалась без особых проблем. Я прочитал эту статью здесь http://24ways.org/2010/speed-up-your-site-with-delayed-content

Метод отсрочки выглядит следующим образом (вытащил из страницы, не обращая внимания на URL-адрес)

<div>
    <h4>
        <a href="#" onclick="location.href='http://allinthehead.com/'; return false;" 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 + '">'
    });
});

Я не планирую делать это для каждого изображения, но определенно для некоторого изображения, которое мне не нужно, чтобы оно отображалось во время загрузки страницы.

Это лучший способ пойти или есть лучшие способы добиться более быстрой загрузки страницы, отложив изображения?

благодаря

ОТВЕТЫ

Ответ 1

Немного поздно, но в случае, если это принесет пользу другим, есть замечательная статья по этой теме Патрик Секстон https://varvy.com/pagespeed/defer-images.html

В основном он предлагает одно и то же, только используя крошечные кодированные изображения с базой 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>

Ответ 2

Это, по-видимому, довольно чистый способ откладывания изображений. Единственная потенциальная проблема заключается в том, что изображения имеют важную информацию, поскольку "атрибуты данных являются новой функцией в HTML5".

Другим вариантом может быть размещение изображений до конца тела и использование CSS для их размещения. Лично я буду придерживаться javascript.

Ответ 3

Здесь версия showcasing .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 через https://caniuse.com/#feat=queryselector