JavaScript 画像の遅延読み込みとプリロードの分析と概要

この記事では主に、遅延ロードとプリロードの 2 つのテクノロジーの分析を紹介します。早速、見ていきましょう。

遅延読み込みは遅延読み込みとも呼ばれます: JS 画像の遅延読み込み、または特定の条件が満たされた場合にのみ特定の画像を読み込みます。

プリロード: 事前に画像をロードし、ユーザーが画像を表示する必要があるときにローカル キャッシュから直接レンダリングします。

2 つのテクノロジーの本質: 2 つの動作は逆で、1 つは早くロードされ、もう 1 つはゆっくりとロードされるか、まったくロードされないこともあります。遅延ロードはサーバー フロントエンドの負荷を軽減するのに一定の効果がありますが、プリロードはサーバー フロントエンドの負荷を増大させます。

遅延読み込みの意味と実装方法は次のとおりです:

意味: 遅延読み込みの主な目的は、サーバーのフロントエンドを最適化し、リクエストの数を減らすか、リクエストの数を遅らせることです。

実装方法:

1. 1 つ目は、読み込み遅延に setTimeOut または setInterval を使用する、純粋な遅延読み込みです。 2 つ目は、特定の条件が満たされるか、特定のイベントがトリガーされると開始される条件付き読み込みです。

3. 3 番目のタイプは視覚的な領域の読み込みです。これは主にスクロール バーを監視することによって実現されます。ユーザーが画像をプルダウンしたときに画像が表示されることを確認してください。

プリロードの意味と実装方法は次のとおりです:

プリロードは、ユーザーの操作をできるだけ早く反映できるように、ユーザーエクスペリエンスを向上させる代わりにサーバーのフロントエンドのパフォーマンスを犠牲にすると言えます。プリロードを実装するには、CSS (背景)、JS (画像)、HTML (6ed09268cbdd0015bce8dcbbdfa9bfe4) など、さまざまな方法があります。一般的に使用されるのは new Image(); で、その src を設定してプリロードを実装し、onload メソッドを使用してプリロード完了イベントをコールバックします。ブラウザが画像をローカルにダウンロードしている限り、同じ src がキャッシュされます。これは最も基本的で実用的なプリロード方法です。 Image が画像ヘッダーをダウンロードすると、幅と高さが取得されるため、プリロードする前に画像のサイズを取得できます (この方法は、タイマーを使用して幅と高さの変更を循環させることです)。

プリロードを実現するにはどうすればよいですか?

Google で検索できます: 多くの人がこの方法をプリロードに使用していることがわかります: コードは次のとおりです:

function loadImage(url,callback) {
  var img = new Image();
   
  img.src = url;
  img.onload = function(){
    img.onload = null;
    callback.call(img);
  }
}

他のブラウザが正常に動作する理由: 実際、理由は非常に簡単です。ブラウザのキャッシュ。IE6 を除き (つまり、Opera では実行できますが、特に Opera で試しましたが、動作しませんでした。バージョンの問題である可能性があります。現在は修正されている可能性があります。)、他のブラウザではキャッシュが実行されます。もう一度クリックすると onload メソッドが再度実行されますが、IE6 はブラウザから直接取得されます。

今何をすべきですか?最良のケースは、イメージが正常にロードされたかどうかを示すステータス値を持つことができることです。キャッシュからロードする場合は待つ必要がないため、このステータス値はダウンロードされたことを直接示します。http リクエストからロードする場合は、ダウンロードを待つ必要があるため、この値は未完了として表示されます。この場合、それは可能です。 Googleで検索した結果、様々なブラウザに対応したImage属性があることを発見したので紹介します - complete。したがって、イメージのオンロード イベントの前にこの値を判断してください。最終的に、コードは次のようになります:

function loadImage(url,callback) {
  var img = new Image();
   
  img.src = url;
 
  if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
     
    callback.call(img);
    return; // 直接返回，不用再处理onload事件
  }
 
  img.onload = function(){
    img.onload = null;
    callback.call(img);
  }
}

つまり、画像が既にブラウザーのキャッシュにある場合、ブラウザーのキャッシュからの直接の取得、img.complete の関数の直接実行をサポートします。

しかし、上のコードを見るとわかるように、画像がロードされるまで待機する必要があり、その後、コールバック関数を実行できます。また、画像がロードされた後に幅と値を取得できるとも言えます。画像の高さ。では、事前に画像のサイズを取得したい場合はどうすればよいでしょうか?インターネットの経験から言えば、ブラウザが画像をロードすると、画像は最初に土地の一部を占有し、その後ゆっくりとロードされることがわかります。ブラウザはヘッダー データを取得できるため、幅と高さの属性を事前に設定する必要はありません。画像。これに基づいて、JavaScript を使用して画像のサイズステータスを定期的に検出するだけで、画像サイズの準備完了ステータスを知ることができます。コードは次のとおりです: (ただし、このメソッドは私が考えたものではなく、私が書いたコードでもないという前提があります。オンラインの友人がまとめたコードです。私はそのような原則があることを知っているだけです)

var imgReady = (function(){
  var list = [],
    intervalId = null;
 
  // 用来执行队列
  var queue = function(){
 
    for(var i = 0; i < list.length; i++){
      list[i].end ? list.splice(i--,1) : list[i]();
    }
    !list.length && stop();
  };
   
  // 停止所有定时器队列
  var stop = function(){
    clearInterval(intervalId);
    intervalId = null;
  }
  return function(url, ready, error) {
    var onready = {},
      width,
      height,
      newWidth,
      newHeight,
      img = new Image();
    img.src = url;
 
    // 如果图片被缓存，则直接返回缓存数据
    if(img.complete) {
      ready.call(img);
      return;
    }
    width = img.width;
    height = img.height;
 
    // 加载错误后的事件
    img.onerror = function () {
      error && error.call(img);
      onready.end = true;
      img = img.onload = img.onerror = null;
    };
 
    // 图片尺寸就绪
    var onready = function() {
      newWidth = img.width;
      newHeight = img.height;
      if (newWidth !== width || newHeight !== height ||
        // 如果图片已经在其他地方加载可使用面积检测
        newWidth * newHeight > 1024
      ) {
        ready.call(img);
        onready.end = true;
      };
    };
    onready();
    // 完全加载完毕的事件
    img.onload = function () {
      // onload在定时器时间差范围内可能比onready快
      // 这里进行检查并保证onready优先执行
      !onready.end && onready();
      // IE gif动画会循环执行onload，置空onload即可
      img = img.onload = img.onerror = null;
    };
     
     
    // 加入队列中定期执行
    if (!onready.end) {
      list.push(onready);
      // 无论何时只允许出现一个定时器，减少浏览器性能损耗
      if (intervalId === null) {
        intervalId = setInterval(queue, 40);
      };
    };
  }
})();

呼び出し方法は以下の通りです:

imgReady('http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg',function(){
　　alert('width:' + this.width + 'height:' + this.height);
});

以上がこの記事の全内容です