js melaksanakan pemuatan tertunda imej halaman web untuk meningkatkan kemahiran speed_javascript membuka halaman web

Terdapat banyak cara untuk meningkatkan kelajuan pemuatan halaman web Menggunakan jquery.lazyload.js untuk melaksanakan pemuatan malas tak segerak bagi imej akan menjadi kaedah yang baik untuk meningkatkan kelajuan pembukaan halaman web untuk tapak web dengan banyak imej pada. halaman tersebut. Di sebelah kiri senarai lajur di tapak web Code Jun, anda boleh melihat modul paparan lakaran kecil artikel semasa pratonton pada PC, yang akan memanjangkan masa pemuatan halaman web pada tahap tertentu. Artikel ini menggunakan kaedah pemuatan tertunda tak segerak bagi imej untuk meningkatkan kelajuan pemuatan halaman tapak web ini.

Gambar dimuatkan secara tidak segerak, yang bermaksud bahawa ia tidak perlu memuatkan dan memaparkan semua gambar pada halaman serentak Apabila pengguna meluncur bar skrol ke kedudukan tertentu, gambar pada kedudukan yang sepadan akan dimuatkan dan dipaparkan. Ini boleh meningkatkan kelajuan pemuatan halaman web.

Terdapat banyak artikel teknikal dengan banyak gambar Jika semua gambar perlu dimuatkan pada satu masa semasa membuka laman web, pengguna pasti perlu menunggu untuk masa yang sangat lama. Pendekatan ini akan menjadikan pengalaman pengguna sangat teruk, dan tidak perlu memuatkan semua imej pada halaman sekaligus. Pemuatan malas asynchronous imej adalah pendekatan yang paling munasabah dan sesuai dalam reka bentuk web.

Kami menggunakan jquery.lazyload.js untuk melaksanakan pemuatan lazy tak segerak bagi imej. Ingat untuk memuatkan jQuery dahulu.

1. Import pemalam JS:

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.lazyload.js"></script>

2. Masukkan kod JavaScript ke dalam halaman:

$(document).ready(function($){
$("img").lazyload({
placeholder:"grey.gif", //加载图片前的占位图片
effect:"fadeIn" //加载图片使用的效果(淡入)
});
});

Melalui dua langkah di atas, anda boleh melaksanakan pemuatan tertunda tak segerak bagi imej halaman web dengan mudah.

Izinkan saya memberi anda pengenalan terperinci:
Kadang-kadang kita melihat beberapa laman web yang besar Jika halaman mempunyai banyak gambar, apabila anda menatal ke baris yang sepadan, gambar dalam baris semasa dimuatkan dengan serta-merta ditambah, dan gambar-gambar lain tidak ditambah Imej tersembunyi tidak dimuatkan, yang mempercepatkan pemuatan halaman.

Disyorkan: Gunakan pemalam jquery lazy loading imej jquery.lazyload untuk mencapai kelewatan imej

Prinsip pelaksanaan:

Tukar semua imej yang memerlukan pemuatan tertangguh kepada format berikut:

<img lazy_src="图片路径" border="0"/>

Kemudian apabila halaman dimuatkan, simpan semua imej menggunakan lazy_src ke dalam tatasusunan, kemudian hitung bahagian atas kawasan yang boleh dilihat semasa menatal, dan kemudian jadikan bahagian atas imej yang dimuatkan tertangguh lebih kecil daripada kawasan yang kelihatan semasa (iaitu imej Nilai src imej yang muncul di kawasan yang boleh dilihat digantikan dengan lazy_src (muat imej):

Kod JS:

 lazyLoad = (function() {
 
  var map_element = {};
 
  var element_obj = [];
 
  var download_count = 0;
 
  var last_offset = -1;
 
  var doc_body;
 
  var doc_element;
 
  var lazy_load_tag;
 
  function initVar(tags) {
 
    doc_body = document.body;
 
    doc_element = document.compatMode == 'BackCompat' ? doc_body : document.documentElement;
 
    lazy_load_tag = tags || ["img", "iframe"];
 
  };
 
  function initElementMap() {
 
    var all_element = [];
 
    //从所有相关元素中找出需要延时加载的元素
 
    for (var i = 0,
 
len = lazy_load_tag.length; i < len; i++) {
 
      var el = document.getElementsByTagName(lazy_load_tag[i]);
 
      for (var j = 0,
 
len2 = el.length; j < len2; j++) {
 
        if (typeof (el[j]) == "object" && el[j].getAttribute("lazy_src")) {
 
          element_obj.push(all_element[key]);
 
        }
 
      }
 
    }
 
  
 
    for (var i = 0,
 
len = element_obj.length; i < len; i++) {
 
      var o_img = element_obj[i];
 
      var t_index = getAbsoluteTop(o_img); //得到图片相对document的距上距离
 
      if (map_element[t_index]) {
 
        map_element[t_index].push(i);
 
      } else {
 
        //按距上距离保存一个队列
 
        var t_array = [];
 
        t_array[0] = i;
 
        map_element[t_index] = t_array;
 
        download_count++; //需要延时加载的图片数量
 
      }
 
    }
 
  
 
  };
 
  function initDownloadListen() {
 
    if (!download_count) return;
 
    var offset = (window.MessageEvent && !document.getBoxObjectFor) &#63; doc_body.scrollTop : doc_element.scrollTop;
 
    //可视化区域的offtset=document的高+
 
    var visio_offset = offset + doc_element.clientHeight;
 
    if (last_offset == visio_offset) {
 
      setTimeout(initDownloadListen, 200);
 
      return;
 
    }
 
    last_offset = visio_offset;
 
    var visio_height = doc_element.clientHeight;
 
    var img_show_height = visio_height + offset;
 
    for (var key in map_element) {
 
      if (img_show_height > key) {
 
        var t_o = map_element[key];
 
        var img_vl = t_o.length;
 
        for (var l = 0; l < img_vl; l++) {
 
          element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src");
 
        }
 
        delete map_element[key];
 
        download_count--;
 
      }
 
    }
 
    setTimeout(initDownloadListen, 200);
 
  };
 
  function getAbsoluteTop(element) {
 
    if (arguments.length != 1 || element == null) {
 
      return null;
 
    }
 
    var offsetTop = element.offsetTop;
 
    while (element = element.offsetParent) {
 
      offsetTop += element.offsetTop;
 
    }
 
    return offsetTop;
 
  }
 
  function init(tags) {
 
    initVar(tags);
 
    initElementMap();
 
    initDownloadListen();
 
  };
 
  return {
 
    init: init
 
  }
 
})();

Cara menggunakan: Tukar src imej yang perlu ditangguhkan dimuatkan pada halaman kepada lazy_src, kemudian letakkan js di atas di hujung badan, dan kemudian panggil: lazyLoad.init ();
Kaedah mengusik boleh menggunakan pepijat api untuk memeriksa sama ada imej sementara ditangguhkan dimuatkan.
Juga:
Jika terdapat lajur dengan penukaran kandungan pada halaman anda, imej dalam kandungan mungkin tidak dipaparkan semasa menukar Penyelesaiannya adalah untuk memuatkan imej secara berasingan semasa kandungan, seperti:

///切换内容的代码…
 
 chlid.find("img[init_src]").each(function(){
 
  $(this).attr("src",$(this).attr("init_src"));
 
  $(this).removeAttr("init_src");
 
 });

Apa yang dipanggil pemuatan tak segerak bagi imej bermakna anda tidak perlu memuatkan semua imej serentak Anda boleh memanggilnya memuatkan tertangguh atau memuatkan penimbal.

Mari lihat jika anda mempunyai keperluan ini: terdapat banyak gambar dalam artikel Jika anda memuatkan semua gambar semasa memuatkan artikel, ia sudah pasti akan memperlahankan kelajuan pemuatan dan membuat pengguna menunggu lebih lama ingin mencari artikel sedemikian. Pemalam yang membenarkan halaman web hanya memuatkan imej dalam medan paparan pelayar. Imej yang tidak muncul dalam julat tidak akan dimuatkan buat sementara waktu dan akan dimuatkan secara beransur-ansur apabila pengguna meluncur bar skrol. lazyload digunakan untuk mencapai kesan ini.
Lazyload.js sebenarnya adalah pemalam untuk jQuery Nama penuhnya ialah jquery.lazyload.js Anda boleh mengetahui fungsinya hanya dengan melihat namanya - ia bermakna memuatkan malas. Oleh kerana ia ditulis dalam javascript, ia sesuai untuk semua halaman web, termasuk WordPress.

Jika anda ingin menggunakan lazyload, anda mesti memuatkan jQuery dahulu, yang bergantung pada jQuery untuk mencapai kesan.

Di atas adalah keseluruhan kandungan artikel ini. Saya harap semua orang mempunyai pemahaman yang lebih mendalam tentang js untuk melaksanakan pemuatan tertunda imej halaman web.