Événement jQuery pour déclencher une action lorsqu'un div est rendu visible

J'utilise jQuery dans mon site et je voudrais déclencher certaines actions lorsqu'un certain div est rendu visible.

Est-il possible d'attacher une sorte de gestionnaire d'événement "isvisible" à des div arbitraires et de faire exécuter un certain code quand le div est rendu visible?

Je voudrais quelque chose comme le pseudocode suivant:

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

Le code d'alerte ("faire quelque chose") ne doit pas se déclencher tant que le contentDiv n'est pas réellement rendu visible.

Merci.

Vous pouvez toujours ajouter à la méthode .show () d'origine afin de ne pas avoir à déclencher d'événements à chaque fois que vous affichez quelque chose ou si vous en avez besoin pour travailler avec du code hérité:

Extension 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]);
    });
  }
});

Exemple d'utilisation:

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

Cela vous permet effectivement de faire quelque chose avant et après le spectacle tout en exécutant toujours le comportement normal de la méthode .show () d'origine.

^{Vous pouvez également créer une autre méthode pour ne pas avoir à remplacer la méthode .show () d'origine.}

Les observateurs des mutations DOM abordent le problème . Ils vous permettent de lier un observateur (une fonction) à des événements de changement de contenu, de texte ou d'attributs d'éléments dom.

Avec la sortie d'IE11, tous les principaux navigateurs prennent en charge cette fonctionnalité, consultez http://caniuse.com/mutationobserver

L'exemple de code est le suivant:

$(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>

Il n'y a pas d'événement natif auquel vous pouvez vous connecter, mais vous pouvez déclencher un événement à partir de votre script après avoir rendu la div visible à l'aide de. fonction de déclenchement

par exemple

//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');
});

Vous pouvez utiliser le plugin Live Query de jQuery . Et écrivez le code comme suit:

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

Ensuite, chaque fois que le contentDiv est visible, "faire quelque chose" sera alerté!

La solution de redsquare est la bonne réponse.

Mais en tant que solution IN-THEORY, vous pouvez écrire une fonction qui sélectionne les éléments classés par .visibilityCheck( pas tous les éléments visibles ) et vérifier leur visibilityvaleur de propriété; si truealors faites quelque chose.

Ensuite, la fonction doit être exécutée périodiquement à l'aide de la setInterval()fonction. Vous pouvez arrêter le chronomètre à l'aide de l' clearInterval()appel réussi.

Voici un exemple:

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

window.setInterval(foo, 100);

Vous pouvez également y apporter des améliorations de performances, cependant, la solution est fondamentalement absurde pour être utilisée en action. Alors...

Le code suivant (extrait de http://maximeparmentier.com/2012/11/06/bind-show-hide-events-with-jquery/ ) vous permettra de l'utiliser $('#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);

Si vous souhaitez déclencher l'événement sur tous les éléments (et les éléments enfants) qui sont réellement rendus visibles, par $ .show, toggle, toggleClass, addClass ou 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;
    }
});

Et maintenant votre élément:

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

Vous pouvez ajouter des remplacements à des fonctions jQuery supplémentaires en les ajoutant au tableau en haut (comme "attr")

un déclencheur d'événement de masquage / affichage basé sur l'idée de Glenn: suppression de la bascule car elle déclenche l'affichage / masquage et nous ne voulons pas de 2 feux pour un événement

$(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;
        }
    });
});

J'ai eu ce même problème et j'ai créé un plugin jQuery pour le résoudre pour notre site.

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

Voici comment vous l'utiliseriez en fonction de votre exemple:

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

Utilisez jQuery Waypoints:

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

Autres exemples sur le site de jQuery Waypoints .

Ce qui m'a aidé ici est le polyfill de spécification ResizeObserver récent :

const divEl = $('#section60');

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

Notez qu'il est croisé et performant (pas d'interrogation).

J'ai fait une simple fonction setinterval pour y parvenir. Si l'élément de classe div1 est visible, il définit div2 pour qu'il soit visible. Je ne connais pas une bonne méthode, mais une solution simple.

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

Vous pouvez également essayer le plugin jQuery appear comme mentionné dans le thread parallèle https://stackoverflow.com/a/3535028/741782

Cela prend en charge l'accélération et déclenche l'événement après l'animation! [testé sur 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);

Inspiré par http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/

Il suffit de lier un déclencheur avec le sélecteur et de mettre le code dans l'événement déclencheur:

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

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

Un plugin jQuery est disponible pour observer les changements dans les attributs DOM,

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

Le plugin enveloppe Tout ce dont vous avez besoin est de lier MutationObserver

Vous pouvez ensuite l'utiliser pour regarder la div en utilisant:

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

J'espère que cela fera le travail de la manière la plus simple:

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

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

J'ai changé le déclencheur d'événement masquer / afficher de Catalint basé sur l'idée de Glenns. Mon problème était que j'avais une application modulaire. Je change entre les modules montrant et cachant les parents divs. Ensuite, lorsque je cache un module et que j'en montre un autre, avec sa méthode, j'ai un délai visible lorsque je change de module. Je n'ai besoin que parfois d'allumer cet événement, et chez certains enfants spéciaux. J'ai donc décidé de ne notifier que les enfants avec la classe "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;
    }
});

Puis quand un enfant veut écouter l'événement "show" ou "hide" je dois lui ajouter la classe "displayObserver", et quand il ne veut pas continuer à l'écouter, je lui retire la classe

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);
},

Je souhaite de l'aide

Une façon de le faire.
Fonctionne uniquement sur les modifications de visibilité apportées par le changement de classe css, mais peut également être étendu pour surveiller les modifications d'attribut.

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); }

ma solution:

; (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);

exemple d'utilisation:

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';
                    }">

Ce code de contrôle automatique ne nécessite pas de requête de contrôle visible ou invisible