jQuery événement pour déclencher l'action quand un div qui est rendu visible

Question

Je suis à l'aide de jQuery dans mon site et je voudrais pour déclencher certaines actions lorsqu'un certain div est rendu visible.

Est-il possible de fixer une sorte de "isvisible" gestionnaire d'événement à l'arbitraire de la vrd et ont certains de code à exécuter quand ils le div est rendu visible?

Je voudrais quelque chose comme le pseudo-code suivant:

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

L'alerte("faire quelque chose") du code ne devrait pas le feu jusqu'à ce que le contentDiv est réellement visible.

Merci.

Answer 1

Vous pouvez toujours ajouter à l'original .show() la méthode de sorte que vous n'avez pas à déclencher des événements à chaque fois que vous montrer quelque chose ou si vous en avez besoin pour travailler avec du code existant:

Jquery extension:

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

Effectivement cela permet de faire quelque chose beforeShow et afterShow bien que toujours en cours d'exécution du comportement normal de l'original .méthode show ().

^{Vous pouvez également créer une autre méthode si vous n'avez pas à remplacer l'original .méthode show ().}

Answer 2

Le problème est pris en charge par DOM mutation des observateurs. Ils permettent de lier un observateur (une fonction) pour les événements de changement de contenu, le texte ou les attributs des éléments du dom.

Pris en charge uniquement dans certains navigateurs, notamment le Chrome et Firefox à la fois que la réponse est écrite.

L'exemple de code suivant:

<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>
<script type="text/javascript">
$(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 });

});
</script>

Answer 3

Il n'est pas natif de l'événement, vous pouvez brancher dans pour ceci, cependant, vous pouvez déclencher un événement à partir de votre script après avoir fait la div visible à l'aide de l' .déclenchement de la fonction

e.g

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

Answer 4

Vous pouvez utiliser du jQuery livequery plugin. Et d'écrire le code comme suit:

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

Ensuite, à chaque fois que l'contentDiv est visible, "faire quelque chose" sera alerté de!

Answer 5

redsquare la solution est le bon/logique de réponse.

mais comme DANS la THÉORIE de solution , vous pouvez coder une fonction qui est de sélectionner les éléments classés par .visibilityCheck classe (pas tous les éléments visibles) et de vérifier leur visibility la valeur de la propriété; si true puis faire quelque chose. ok?
Par la suite, la fonction doit être effectuée périodiquement, à l'aide de l' setInterval() fonction. Comme vous le savez, vous pouvez arrêter la minuterie à l'aide clearInterval() et l'ID de minuterie sur la fonction du succès de l'appel.

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

Vous pouvez également faire quelques améliorations de performances sur ce point, mais la solution est fondamentalement ignoré à être utilisées dans l'action, je pense.