Kaedah pelaksanaan dan idea untuk memuatkan malas kemahiran javascript images_javascript

Contoh dalam artikel ini memperkenalkan cara untuk menangguhkan memuatkan imej melalui javascript, dan berkongsi dengan anda untuk rujukan anda Kandungan khusus adalah seperti berikut

Apabila halaman web mengandungi sejumlah besar gambar, jika semua gambar dimuatkan pada permulaan, ia pasti akan menyebabkan masalah prestasi dan kecekapan, dan pengguna mungkin keluar kerana masa menunggu yang lama.

Pada masa ini, kita perlu menggunakan pemuatan malas, iaitu pemuatan tertunda imej, untuk meningkatkan pertalian tapak web.

1. Malas memuatkan imej

Idea asas adalah seperti berikut:
Tetapkan atribut tersuai seperti lazy-src untuk imej yang perlu dimuatkan dengan malas dan laluan ke sumber imej wujud. Kemudian letakkan semua imej yang perlu dimuatkan secara malas ke dalam tatasusunan Apabila window.onscroll digunakan, ia dinilai sama ada kandungan tatasusunan muncul dalam pandangan pengguna Jika ia muncul, kandungan atribut tersuai diberikan kepada src atribut imej.

Mari kita bincangkan tentang langkah pelaksanaan secara terperinci.
Mula-mula, kita perlu menentukan fungsi yang mengembalikan kedudukan kawasan yang boleh dilihat penyemak imbas:

  /**
   * @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};
   }

Kemudian tentukan fungsi untuk mengembalikan lokasi sumber yang akan dimuatkan:

/**
   * @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};
   }

Seterusnya takrifkan fungsi untuk menentukan sama ada dua kawasan segi empat tepat bersilang:

  /**
   * @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;
   }

Akhir sekali, pantau sumber imej dan muatkan sumber jika ia memasuki medan pandangan pengguna:

   /**
   * @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];
        }
      }
    }
   }

Sudah tentu, ini hanya idea jika digunakan dalam kejuruteraan, masih terdapat banyak kelemahan, seperti prestasi dan keserasian. Jadi saya cadangkan pemalam jquery: lazyload

1. Tentukan pemuatan css selesai

Dengan cara ini, berikut ialah cara menilai sama ada fail css halaman web telah dimuatkan. Kami tahu bahawa css diperkenalkan melalui fail luaran, yang sebenarnya merupakan nod pautan. Jadi kita hanya perlu meninjau atribut helaian atau atribut sheet.cssRules bagi nod pautan untuk menentukan sama ada fail css berjaya dimuatkan sepenuhnya.

2. Tentukan sama ada imej dimuatkan

Begitu juga, teg img mempunyai atribut lengkap dan kami hanya perlu membuat tinjauan pendapat untuk melihat atribut ini.

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

3. Tentukan javascript dimuatkan

Jadi bagaimana untuk menilai bahawa javascript dimuatkan? Kaedah onload nod skrip dilaksanakan selepas pemuatan selesai. IE6 dan IE7 boleh dinilai dengan 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;
}

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.