Acara jQuery untuk memicu tindakan ketika div dibuat terlihat

Saya menggunakan jQuery di situs saya dan saya ingin memicu tindakan tertentu ketika div tertentu dibuat terlihat.

Apakah mungkin untuk melampirkan semacam event handler "isvisible" ke div sewenang-wenang dan menjalankan kode tertentu ketika div dibuat terlihat?

Saya ingin sesuatu seperti kodesemu berikut:

$(function() {
  $('#contentDiv').isvisible(function() {
    alert("do something");
  });
});

Kode lansiran ("lakukan sesuatu") tidak boleh diaktifkan sampai contentDiv benar-benar terlihat.

Terima kasih.

Anda selalu dapat menambahkan metode .show () asli sehingga Anda tidak harus memicu acara setiap kali Anda menunjukkan sesuatu atau jika Anda membutuhkannya untuk bekerja dengan kode lawas:

Ekstensi jquery:

jQuery(function($) {

  var _oldShow = $.fn.show;

  $.fn.show = function(speed, oldCallback) {
    return $(this).each(function() {
      var obj         = $(this),
          newCallback = function() {
            if ($.isFunction(oldCallback)) {
              oldCallback.apply(obj);
            }
            obj.trigger('afterShow');
          };

      // you can trigger a before show if you want
      obj.trigger('beforeShow');

      // now use the old function to show the element passing the new callback
      _oldShow.apply(obj, [speed, newCallback]);
    });
  }
});

Contoh penggunaan:

jQuery(function($) {
  $('#test')
    .bind('beforeShow', function() {
      alert('beforeShow');
    }) 
    .bind('afterShow', function() {
      alert('afterShow');
    })
    .show(1000, function() {
      alert('in show callback');
    })
    .show();
});

Ini secara efektif memungkinkan Anda melakukan sesuatu beforeShow dan afterShow sambil tetap menjalankan perilaku normal dari metode .show () yang asli.

^{Anda juga bisa membuat metode lain sehingga Anda tidak perlu mengganti metode .show () yang asli.}

Masalahnya sedang ditangani oleh pengamat mutasi DOM . Mereka memungkinkan Anda untuk mengikat pengamat (fungsi) ke acara mengubah konten, teks atau atribut elemen dom.

Dengan rilis IE11, semua browser utama mendukung fitur ini, periksa http://caniuse.com/mutationobserver

Contoh kode adalah sebagai berikut:

$(function() {
  $('#show').click(function() {
    $('#testdiv').show();
  });

  var observer = new MutationObserver(function(mutations) {
    alert('Attributes changed!');
  });
  var target = document.querySelector('#testdiv');
  observer.observe(target, {
    attributes: true
  });

});

<div id="testdiv" style="display:none;">hidden</div>
<button id="show">Show hidden div</button>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Tidak ada acara asli yang dapat Anda kaitkan untuk ini, tetapi Anda dapat memicu suatu peristiwa dari skrip Anda setelah Anda membuat div terlihat menggunakan. fungsi pemicu

misalnya

//declare event to run when div is visible
function isVisible(){
   //do something

}

//hookup the event
$('#someDivId').bind('isVisible', isVisible);

//show div and trigger custom event in callback when div is visible
$('#someDivId').show('slow', function(){
    $(this).trigger('isVisible');
});

Anda dapat menggunakan plugin Live Query jQuery . Dan tulis kode sebagai berikut:

$('#contentDiv:visible').livequery(function() {
    alert("do something");
});

Maka setiap kali contentDiv terlihat, "lakukan sesuatu" akan diperingatkan!

Solusi redsquare adalah jawaban yang tepat.

Tetapi sebagai solusi IN-THEORY Anda dapat menulis fungsi yang memilih elemen yang dikelompokkan berdasarkan .visibilityCheck( tidak semua elemen yang terlihat ) dan memeriksa visibilitynilai propertinya; jika truekemudian lakukan sesuatu.

Setelah itu, fungsi tersebut harus dilakukan secara berkala menggunakan setInterval()fungsi tersebut. Anda dapat menghentikan timer menggunakan clearInterval()panggilan keluar yang berhasil.

Ini sebuah contoh:

function foo() {
    $('.visibilityCheck').each(function() {
        if ($(this).is(':visible')){
            // do something
        }
    });
}

window.setInterval(foo, 100);

Anda juga dapat melakukan beberapa peningkatan kinerja di atasnya, namun solusinya pada dasarnya tidak masuk akal untuk digunakan dalam tindakan. Begitu...

Kode berikut (ditarik dari http://maximeparmentier.com/2012/11/06/bind-show-hide-events-with-jquery/ ) akan memungkinkan Anda untuk menggunakan $('#someDiv').on('show', someFunc);.

(function ($) {
  $.each(['show', 'hide'], function (i, ev) {
    var el = $.fn[ev];
    $.fn[ev] = function () {
      this.trigger(ev);
      return el.apply(this, arguments);
    };
  });
})(jQuery);

Jika Anda ingin memicu acara di semua elemen (dan elemen turunan) yang benar-benar dibuat terlihat, oleh $ .show, toggle, toggleClass, addClass, atau removeClass:

$.each(["show", "toggle", "toggleClass", "addClass", "removeClass"], function(){
    var _oldFn = $.fn[this];
    $.fn[this] = function(){
        var hidden = this.find(":hidden").add(this.filter(":hidden"));
        var result = _oldFn.apply(this, arguments);
        hidden.filter(":visible").each(function(){
            $(this).triggerHandler("show"); //No bubbling
        });
        return result;
    }
});

Dan sekarang elemen Anda:

$("#myLazyUl").bind("show", function(){
    alert(this);
});

Anda bisa menambahkan penggantian ke fungsi jQuery tambahan dengan menambahkannya ke array di bagian atas (seperti "attr")

pemicu acara sembunyikan / tunjukkan berdasarkan Glenns ideea: dihapus toggle karena ia memunculkan / sembunyikan dan kami tidak ingin 2 api untuk satu acara

$(function(){
    $.each(["show","hide", "toggleClass", "addClass", "removeClass"], function(){
        var _oldFn = $.fn[this];
        $.fn[this] = function(){
            var hidden = this.find(":hidden").add(this.filter(":hidden"));
            var visible = this.find(":visible").add(this.filter(":visible"));
            var result = _oldFn.apply(this, arguments);
            hidden.filter(":visible").each(function(){
                $(this).triggerHandler("show");
            });
            visible.filter(":hidden").each(function(){
                $(this).triggerHandler("hide");
            });
            return result;
        }
    });
});

Saya punya masalah yang sama dan membuat plugin jQuery untuk menyelesaikannya untuk situs kami.

https://github.com/shaunbowe/jquery.visibilityChanged

Inilah cara Anda menggunakannya berdasarkan contoh Anda:

$('#contentDiv').visibilityChanged(function(element, visible) {
    alert("do something");
});

Gunakan jQuery Waypoints:

$('#contentDiv').waypoint(function() {
   alert('do something');
});

Contoh lain di situs jQuery Waypoints .

Apa yang membantu saya di sini adalah ResizeObserver spec polyfill baru-baru ini :

const divEl = $('#section60');

const ro = new ResizeObserver(() => {
    if (divEl.is(':visible')) {
        console.log("it's visible now!");
    }
});
ro.observe(divEl[0]);

Perhatikan bahwa ini adalah crossbrowser dan performant (tidak ada polling).

Saya melakukan fungsi setinterval sederhana untuk mencapai ini. Jika elemen dengan kelas div1 terlihat, itu mengatur div2 agar terlihat. Saya tahu bukan metode yang baik, tetapi perbaikan sederhana.

setInterval(function(){
  if($('.div1').is(':visible')){
    $('.div2').show();
  }
  else {
    $('.div2').hide();
  }      
}, 100);

Anda juga dapat mencoba plugin jQueryerge seperti yang disebutkan di thread paralel https://stackoverflow.com/a/3535028/741782

Dukungan ini memudahkan dan memicu acara setelah animasi selesai! [diuji pada jQuery 2.2.4]

(function ($) {
    $.each(['show', 'hide', 'fadeOut', 'fadeIn'], function (i, ev) {
        var el = $.fn[ev];
        $.fn[ev] = function () {
            var result = el.apply(this, arguments);
            var _self=this;
            result.promise().done(function () {
                _self.triggerHandler(ev, [result]);
                //console.log(_self);
            });
            return result;
        };
    });
})(jQuery);

Terinspirasi Oleh http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/

Cukup ikat pemicu dengan pemilih dan masukkan kode ke dalam peristiwa pemicu:

jQuery(function() {
  jQuery("#contentDiv:hidden").show().trigger('show');

  jQuery('#contentDiv').on('show', function() {
    console.log('#contentDiv is now visible');
    // your code here
  });
});

Ada plugin jQuery yang tersedia untuk menonton perubahan atribut DOM,

https://github.com/darcyclarke/jQuery-Watch-Plugin

Plugin membungkus Yang perlu Anda lakukan adalah mengikat MutationObserver

Anda kemudian dapat menggunakannya untuk menonton div menggunakan:

$("#selector").watch('css', function() {
    console.log("Visibility: " + this.style.display == 'none'?'hidden':'shown'));
    //or any random events
});

Semoga ini akan melakukan pekerjaan dengan cara paling sederhana:

$("#myID").on('show').trigger('displayShow');

$('#myID').off('displayShow').on('displayShow', function(e) {
    console.log('This event will be triggered when myID will be visible');
});

Saya mengubah pemicu acara sembunyikan / tampilkan dari Catalint berdasarkan ide Glenns. Masalah saya adalah saya punya aplikasi modular. Saya mengubah antara modul yang menunjukkan dan menyembunyikan orangtua divs. Kemudian ketika saya menyembunyikan modul dan menunjukkan yang lain, dengan metodenya saya memiliki keterlambatan yang terlihat ketika saya mengubah antar modul. Saya hanya kadang-kadang perlu menyulut acara ini, dan pada beberapa anak spesial. Jadi saya memutuskan untuk memberi tahu anak-anak dengan kelas "displayObserver"

$.each(["show", "hide", "toggleClass", "addClass", "removeClass"], function () {
    var _oldFn = $.fn[this];
    $.fn[this] = function () {
        var hidden = this.find(".displayObserver:hidden").add(this.filter(":hidden"));
        var visible = this.find(".displayObserver:visible").add(this.filter(":visible"));
        var result = _oldFn.apply(this, arguments);
        hidden.filter(":visible").each(function () {
            $(this).triggerHandler("show");
        }); 
        visible.filter(":hidden").each(function () {
            $(this).triggerHandler("hide");
        });
        return result;
    }
});

Kemudian ketika seorang anak ingin mendengarkan acara "show" atau "hide" saya harus menambahkan dia kelas "displayObserver", dan ketika itu tidak ingin melanjutkan mendengarkannya, saya menghapusnya kelas

bindDisplayEvent: function () {
   $("#child1").addClass("displayObserver");
   $("#child1").off("show", this.onParentShow);
   $("#child1").on("show", this.onParentShow);
},

bindDisplayEvent: function () {
   $("#child1").removeClass("displayObserver");
   $("#child1").off("show", this.onParentShow);
},

Saya berharap bantuan

Salah satu cara untuk melakukan ini.
Hanya berfungsi pada perubahan visibilitas yang dibuat oleh perubahan kelas css, tetapi dapat diperluas untuk mengawasi perubahan atribut juga.

var observer = new MutationObserver(function(mutations) {
        var clone = $(mutations[0].target).clone();
        clone.removeClass();
                for(var i = 0; i < mutations.length; i++){
                    clone.addClass(mutations[i].oldValue);
        }
        $(document.body).append(clone);
        var cloneVisibility = $(clone).is(":visible");
        $(clone).remove();
        if (cloneVisibility != $(mutations[0].target).is(":visible")){
            var visibilityChangedEvent = document.createEvent('Event');
            visibilityChangedEvent.initEvent('visibilityChanged', true, true);
            mutations[0].target.dispatchEvent(visibilityChangedEvent);
        }
});

var targets = $('.ui-collapsible-content');
$.each(targets, function(i,target){
        target.addEventListener('visibilityChanged',VisbilityChanedEventHandler});
        target.addEventListener('DOMNodeRemovedFromDocument',VisbilityChanedEventHandler });
        observer.observe(target, { attributes: true, attributeFilter : ['class'], childList: false, attributeOldValue: true });
    });

function VisbilityChanedEventHandler(e){console.log('Kaboom babe'); console.log(e.target); }

solusi saya:

; (function ($) {
$.each([ "toggle", "show", "hide" ], function( i, name ) {
    var cssFn = $.fn[ name ];
    $.fn[ name ] = function( speed, easing, callback ) {
        if(speed == null || typeof speed === "boolean"){
            var ret=cssFn.apply( this, arguments )
            $.fn.triggerVisibleEvent.apply(this,arguments)
            return ret
        }else{
            var that=this
            var new_callback=function(){
                callback.call(this)
                $.fn.triggerVisibleEvent.apply(that,arguments)
            }
            var ret=this.animate( genFx( name, true ), speed, easing, new_callback )
            return ret
        }
    };
});

$.fn.triggerVisibleEvent=function(){
    this.each(function(){
        if($(this).is(':visible')){
            $(this).trigger('visible')
            $(this).find('[data-trigger-visible-event]').triggerVisibleEvent()
        }
    })
}
})(jQuery);

contoh penggunaan:

if(!$info_center.is(':visible')){
    $info_center.attr('data-trigger-visible-event','true').one('visible',processMoreLessButton)
}else{
    processMoreLessButton()
}

function processMoreLessButton(){
//some logic
}

$( window ).scroll(function(e,i) {
    win_top = $( window ).scrollTop();
    win_bottom = $( window ).height() + win_top;
    //console.log( win_top,win_bottom );
    $('.onvisible').each(function()
    {
        t = $(this).offset().top;
        b = t + $(this).height();
        if( t > win_top && b < win_bottom )
            alert("do something");
    });
});

<div id="welcometo">Özhan</div>
<input type="button" name="ooo" 
       onclick="JavaScript:
                    if(document.all.welcometo.style.display=='none') {
                        document.all.welcometo.style.display='';
                    } else {
                        document.all.welcometo.style.display='none';
                    }">

Kontrol otomatis kode ini tidak memerlukan kueri kontrol yang terlihat atau tidak terlihat