JavaScript の遅延読み込みの実装方法とアイデア image_javascript スキル

この記事の例では、JavaScript を使用して画像の読み込みを遅らせる方法を紹介しており、具体的な内容は次のとおりです。

Web ページに大量の写真が含まれている場合、最初にすべての写真が読み込まれると、必然的にパフォーマンスと効率の問題が発生し、長い待ち時間によりユーザーが離脱する可能性があります。

現時点では、Web サイトの親和性を高めるために、遅延読み込み、つまり画像の遅延読み込みを使用する必要があります。

1. 画像の遅延読み込み

基本的な考え方は次のとおりです:
遅延ロードする必要がある画像には、lazy-src などのカスタム属性を設定します。画像ソースへのパスが存在します。次に、遅延ロードする必要があるすべての画像を配列に配置します。 window.onscroll を使用すると、配列の内容がユーザーの目に表示されるかどうかが判断され、表示される場合はカスタム属性の内容が src に割り当てられます。画像の属性。

実装手順について詳しく説明しましょう。
まず、ブラウザの表示領域の位置を返す関数を定義する必要があります:

  /**
   * @description: 返回浏览器的可视区域位置
   * @return: left:左滑轮距离，top：上滑轮距离，width：可见区域宽度，height：可见区域长度
   */
   function getClient(){
    var l,t,w,h;
    l = document.documentElement.scrollLeft||document.body.scrollLeft;
    t = document.documentElement.scrollTop||document.body.scrollTop;
    w = document.documentElement.clientWidth;
    h = document.documentElement.clientHeight;
    return {left:l,top:t,width:w,height:h};
   }

次に、ロードするリソースの場所を返す関数を定義します。

/**
   * @description: 返回待加载资源位置
   * @params: p:需要加载的资源节点
   * @return: left:左边距离，top：上边距离，width：宽度，height：高度
   */
   function getSubClient(p){
    var l = 0, t = 0, w, h;
    w = p.offsetWidth;
    h = p.offsetHeight;
    while(p.offsetParent){
      l += p.offsetLeft;
      t += p.offsetTop;
      p = p.offsetParent;
    } 
    return {left:l,top:t,width:w,height:h};
   }

次に、2 つの長方形領域が交差するかどうかを判断する関数を定義します。

  /**
   * @decription: 判断两个矩阵是否相交，返回一个布尔值
   * @params: rec1,rec2:需要比较的节点矩阵
   * @return: true： 两矩阵相交
   */
   function contains(rec1,rec2){
    var lc1,lc2,tc1,tc2,w1,h1;
    lc1 = rec1.left + rec1.width/2;
    lc2 = rec2.left + rec2.width/2;
    tc1 = rec1.top + rec1.height/2;
    tc2 = rec2.top + rec2.height/2;
    w1 = (rec1.width + rec2.width)/2;
    h1 = (rec1.height + rec2.height)/2;
    return Math.abs(lc1 - lc2)<w1&&Math.abs(tc1 - tc2)<h1;
   }

最後に、画像リソースを監視し、それらがユーザーの視野に入った場合はリソースを読み込みます:

   /**
   * @description: 资源出现在视野中再加载.将资源放入一个数组。
   */
   var arr = document.getElementsByClassName("divX");
   window.onscroll = function(){
    var prec1 = getClient();
    var prec2;
    for(var i = arr.length-1;i>=0;i--){
      if(arr[i]){
        prec2 = getSubClient(arr[i]);
        if(contains(prec1,prec2)){
          //加载资源
          console.log(arr[i].id);
          arr[i].childNodes[0].src = arr[i].childNodes[0].getAttribute("lazy_src");
          delete arr[i];
        }
      }
    }
   }

もちろん、これは単なるアイデアであり、エンジニアリングで使用する場合は、パフォーマンスや互換性など、まだ多くの欠陥があります。そこで、jquery プラグインをお勧めします: lazyload

1. CSS の読み込みが完了したことを確認します

ちなみに、WebページのCSSファイルが読み込まれているかどうかを判断する方法は次のとおりです。 CSS は外部ファイル (実際にはリンク ノード) を通じて導入されることがわかります。したがって、リンク ノードのシート属性または Sheet.cssRules 属性をポーリングするだけで、CSS ファイルが完全に正常に読み込まれたかどうかを判断できます。

2. 画像がロードされているかどうかを確認します

同様に、img タグには完全な属性があり、この属性を表示するにはポーリングするだけで済みます。

 function imgLoad(img, callback) {
      var timer = setInterval(function() {
        if (img.complete) {
          callback(img)
          clearInterval(timer)
        }
      }, 50)
    }
    imgLoad(img1, function() {
      p1.innerHTML('加载完毕')
    })

3. JavaScript がロードされていることを確認します

それでは、JavaScript が読み込まれているかどうかをどのように判断するのでしょうか?ロード完了後にスクリプトノードのonloadメソッドが実行されます。 IE6 と IE7 は、readyState によって判断できます:

function include_js(file) {
  var _doc = document.getElementsByTagName('head')[0];
  var js = document.createElement('script');
  js.setAttribute('type', 'text/javascript');
  js.setAttribute('src', file);
  _doc.appendChild(js);
  if (!/*@cc_on!@*/0) { //if not IE
    //Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload
    js.onload = function () {
      alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload');
    }
  } else {
    //IE6、IE7 support js.onreadystatechange
    js.onreadystatechange = function () {
      if (js.readyState == 'loaded' || js.readyState == 'complete') {
        alert('IE6、IE7 support js.onreadystatechange');
      }
    }
  }
  return false;
}

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。