37

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

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

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

ありがとう

4

5 に答える 5

64

少し遅れましたが、他の人に利益をもたらす場合に備えて、PatrickSextonによるこのトピックに関するすばらしい記事があり ますhttps://varvy.com/pagespeed/defer-images.html

彼は基本的に同じことを提案していますが、ベース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">

次に、スクリプトはすべての画像に対して単純で一般的です

<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>
于 2015-05-26T13:33:29.110 に答える
5

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

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

于 2012-09-12T21:29:14.760 に答える
2

これが紹介するバージョン.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();
}

https://caniuse.com/#feat=queryselector.querySelectorを.querySelectorAll介した互換性テーブルは次のとおりです。

于 2017-11-18T07:19:05.853 に答える
1

HTML

<img
    width="1024"
    src="https://placehold.it/64x48.jpg"
    data-src-defer="https://images.unsplash.com/photo-1570280406792-bf58b7c59247?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1486&q=80"
    alt="image 1"
/>
            
<img
    width="1024"
    src="https://placehold.it/64x48.jpg"
    data-src-defer="https://images.unsplash.com/photo-1557053964-d42e8e29cb27?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
    alt="image 2"
/>

JS

function deferImgs() {
    Array
    .from(document.querySelectorAll("img[data-src-defer]"))
    .forEach((element) => {
        element.setAttribute("src", element.dataset.srcDefer);
        });
}
    
window.addEventListener("load", deferImgs());

================================================== ==============

私はこの編集でFarrukhの要求に応じようとしています。

私は最善を尽くしていますが、残念ながら英語は私が話す第三言語にすぎません。そして、私は言語の天才ではありません。：D

このjsコードスニペットは、いくつかの大きな画像の読み込みの遅延を示しています。これは実際的な実装ではありません。画像間のサイズの違いは意図的に大きくなっています。これは、テストが例示的でなければならないためです。ブラウザ開発ツールページからその動作を監視できます。F12> [ネットワーク]タブ>[速度設定]ドロップダウンテストの理想的なネットワーク速度は、1〜3MB /秒です（ネットワーク速度が遅い場合があります）。テストを数回実行すると、画像が読み込まれる順序はこの場合は制御されませんが、送信に依存することがわかります。規制されていないため、どの画像が最初に到着するかを予測することはできません。

まず、小さな画像を大きなプレースホルダーに読み込みます。（画像：64x48.jpg>プ​​レースホルダーwidth = "1024"）。

querySelectorAll（）メソッドは、静的ノードリストを返します。このノードのリストは一見配列のように見えますが、そうではありません。

これは配列のようなオブジェクトです。

document.querySelectorAll("img[data-src-defer]")

Array.from（）メソッドは、このオブジェクトから新しい配列インスタンスを作成できます。これで、forEachメソッドをこの配列で実行できます。forEach（）メソッドは、配列の要素ごとに提供された関数を1回実行します。

この場合、配列の各要素は次の関数に1回渡されます。

(element) => {
        element.setAttribute("src", element.dataset.srcDefer);
        }

この関数は、画像タグのsrc = ""属性の値を、同じ画像タグのデータセットの値に設定します。

src="https://placehold.it/64x48.jpg";

data-src-defer="https://images.unsplash.com/photo-1570280406792-bf58b7c59247?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1486&q=80";

src = data-src-defer;

So finally:

src="https://images.unsplash.com/photo-1570280406792-bf58b7c59247?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1486&q=80";
于 2021-02-20T20:09:41.183 に答える
0

以下の例のように簡単に行うことができます。

すべての画像data-srcには、ファイルパスを配置する属性があります。そしてsrc、偽の透明な1x1pxpng画像の属性。loadingに設定された属性を追加することもできます。これは、ビューポート（可視サイトゾーン）の外にある画像をすぐにロードしないようにlazy最新のブラウザに指示します。

<img data-src="path/to/image.jpg" loading="lazy"
     src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />

このスクリプトを追加して、サイトが読み込まれたときにすべての画像に属性を取得させます（機能させるにはjQuerysrcが必要です）

$(function(){
    $("img[data-src]").attr("src", function(){ return $(this).data("src"); });
});
于 2021-05-27T08:28:45.953 に答える