Gunakan jQuery untuk memantau perubahan_jquery saiz elemen DOM

Sebab

Semasa saya menulis halaman hari ini, saya tiba-tiba mempunyai keperluan sedemikian Memandangkan ketinggian elemen induk (DIV) ialah nilai tetap yang dikira oleh javascript, pemalam berbilang bicara telah ditambahkan padanya komen pengguna, atribut ketinggian elemen kanak-kanak (DIV) dinaikkan, menyebabkan elemen kanak-kanak melimpah. Tetapi saya tidak tahu cara menambah fungsi panggil balik untuk butang ulasan Duosuo, jadi saya terfikir untuk mengira semula ketinggian elemen induk berdasarkan perubahan saiz elemen anak.

mengubah saiz?

Biasanya, fungsi panggil balik yang mengubah suai reka letak dicetuskan apabila keseluruhan tetingkap penyemak imbas berubah. Acara ubah saiz objek tetingkap digunakan, menggunakan:

window.onresize = callback;

untuk mengikat. Tetapi menurut sasaran acara ubah saiz ialah defaultView (tetingkap), sila lihat dokumen ubah saiz MDN untuk butiran Maksudnya, hanya objek tetingkap yang mempunyai acara ubah saiz, jadi saya terfikir untuk menggunakan mekanisme acara jQuery sendiri untuk mensimulasikan saiz semula. peristiwa pada elemen biasa

Idea pelaksanaan menggunakan acara JQUERY

Anda boleh memikirkan cara yang lebih mudah:

1 Apabila elemen terikat pada objek ubah saiz, rekodkan lebar dan tinggi elemen
2. Gunakan requestAnimationFrame, setTimeout dan setInterval untuk menanyakan lebar dan ketinggiannya sekali-sekala Jika ia berbeza daripada lebar dan ketinggian yang dirakam, jalankan fungsi panggil balik dan kemas kini lebar yang dirakam kepada ketinggian

.

pemalam JQUERY

Ben Alman menulis pemalam jQuery untuk fungsi ini, Portal
Kod pemalam (bahagian teras), sila semak kandungan blog Ben Alman untuk kod terperinci:

(function($, window, undefined) {
 var elems = $([]),
  jq_resize = $.resize = $.extend($.resize, {}),
  timeout_id,
  str_setTimeout = 'setTimeout',
  str_resize = 'resize',
  str_data = str_resize + '-special-event',
  str_delay = 'delay',
  str_throttle = 'throttleWindow';
 jq_resize[str_delay] = 250;
 jq_resize[str_throttle] = true;
 $.event.special[str_resize] = {
  setup: function() {
   if (!jq_resize[str_throttle] && this[str_setTimeout]) {
    return false;
   }
   var elem = $(this);
   elems = elems.add(elem);
   $.data(this, str_data, {
    w: elem.width(),
    h: elem.height()
   });
   if (elems.length === 1) {
    loopy();
   }
  },
  teardown: function() {
   if (!jq_resize[str_throttle] && this[str_setTimeout]) {
    return false;
   }
   var elem = $(this);
   elems = elems.not(elem);
   elem.removeData(str_data);
   if (!elems.length) {
    clearTimeout(timeout_id);
   }
  },
  add: function(handleObj) {
   if (!jq_resize[str_throttle] && this[str_setTimeout]) {
    return false;
   }
   var old_handler;
   function new_handler(e, w, h) {
    var elem = $(this),
     data = $.data(this, str_data);
    data.w = w !== undefined ? w : elem.width();
    data.h = h !== undefined ? h : elem.height();
    old_handler.apply(this, arguments);
   }
   if ($.isFunction(handleObj)) {
    old_handler = handleObj;
    return new_handler;
   } else {
    old_handler = handleObj.handler;
    handleObj.handler = new_handler;
   }
  }
 };

 function loopy() {
  timeout_id = window[str_setTimeout](function() {
   elems.each(function() {
    var elem = $(this),
     width = elem.width(),
     height = elem.height(),
     data = $.data(this, str_data);
    if (width !== data.w || height !== data.h) {
     elem.trigger(str_resize, [data.w = width, data.h = height]);
    }
   });
   loopy();
  }, jq_resize[str_delay]);
 }
})(jQuery, this);

jQuery menyediakan pembangun pemalam jQuery dengan antara muka untuk menambah acara tersuai Untuk butiran, sila rujuk dokumentasi rasmi jQuery Berikut ialah cara biasa untuk menambah acara tersuai jQuery, yang mempunyai tiga cangkuk:

1. Persediaan: Cangkuk persediaan dipanggil kali pertama acara jenis tertentu dilampirkan pada elemen apabila ia diikat untuk kali pertama mengikat acara
2. teardown: Cangkuk teardown dipanggil apabila acara akhir jenis tertentu dialih keluar daripada elemen Jika kaedah ini ditentukan, ia akan dilaksanakan sebelum mengalih keluar pengendali acara (removeEventListener Jika false dikembalikan, pengikatan lalai). akan dialih keluar Acara
3. tambah: Setiap kali pengendali acara ditambahkan pada elemen melalui API seperti .on(), jQuery memanggil cangkuk ini Kaedah ini akan dilaksanakan setiap kali acara terikat pada elemen

Terdapat tiga cangkuk: persediaan, teardown dan tambah Perkara pertama yang dilakukan oleh setiap cangkuk ialah untuk mengesan sama ada objek itu objek tetingkap, dan kemudian mengendalikannya secara khas mengikut objek tetingkap, kerana objek tetingkap itu sendiri mempunyai saiz semula. acara

Seperti yang anda lihat dari cangkuk persediaan, apabila memulakan keseluruhan pemprosesan acara, baris gilir elemen dibuat setiap elemen dalam baris gilir meletakkan lebar dan tinggi dalam data, dan kemudian memulakan fungsi gelung setiap 250ms Tentukan sama ada terdapat perubahan Jika terdapat perubahan, cetuskan fungsi panggil balik dan kemas kini lebar dan ketinggian dalam data

Seperti yang anda boleh lihat daripada cangkuk teardown, apabila elemen dialih keluar, anda hanya perlu mengalih keluar elemen daripada baris gilir elemen dan mengosongkan data dalam elemen. Jika ia adalah elemen terakhir dalam baris gilir elemen, loopy tidak akan terus dilaksanakan

Dalam cangkuk tambah, fungsi panggil balik dibalut

Di sini anda boleh melihat mekanisme pelaksanaan fungsi tersuai jQuery yang mudah