web-dev-qa-db-ja.com

画像を延期してページの読み込みを高速化する

大きなサイズの画像がたくさん含まれるページを作成しているので、問題なくページが読み込まれるようにしたいと思います。私はこの記事をここで読みます 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 + '">'
    });
});

すべての画像に対してこれを実行する予定はありませんが、ページのロード時に表示する必要のない一部の画像については間違いありません。

これは最善の方法ですか、それとも画像を延期してページの読み込みを高速化する方法がありますか？

ありがとう

javascriptjquerydeferred-loading
28
Huangism

少し遅れますが、他の人にメリットがある場合のために、このトピックに関する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>
41
jsolis

これは、画像を延期するかなりクリーンな方法のようです。唯一の潜在的な問題は、「データ属性はHTML5の新機能」として重要な情報が画像に含まれる場合です。

別のオプションは、画像を本文の最後に配置し、CSSを使用してそれらを配置することです。個人的には、javascriptを使用します。

4
nrodic

.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

1
Sgnl