Alternative plus rapide à $(window).scroll?

Question

J'ai remarqué que le bind de défilement jQuery de $(window).scroll a tendance à ralentir considérablement les pages. Par exemple, j'ai des éléments sur ma page qui changent de style lorsque je fais défiler passé eux en utilisant le script suivant :

$(window).scroll(function() {
     var bottom_of_window = $(window).scrollTop() + $(window).height();
     $('.ElementsToBeChanged').each(function() { 
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            if (bottom_of_window > bottom_of_object) {
                //Ajouter mes styles
            }
        });

});

Il est compréhensible que le site soit lent, car il fonctionne constamment lors du défilement, mais je n'ai pas trouvé d'alternative pour déclencher des événements lorsque des objets sont défilés. Ce type de sites web qui déclenche des événements lors de le défilement semble assez courant; Comment font-ils pour contourner ce ralentissement ?

Answer 1

Ce qui ralentit vos performances n'est pas la fonction de défilement elle-même mais le fait que vous effectuez beaucoup de calculs pour chaque élément à chaque événement de défilement.

Mais malgré cela, je n'ai pas pu voir de baisse de performance avec 20 éléments à l'écran.

Essayez de mettre en cache votre objet window en tant que variable [ex : win = $(window)] et utilisez el de la fonction each au lieu de this.

Au lieu de modifier directement votre css en utilisant jQuery, essayez d'ajouter/supprimer des classes.

Ne utilisez pas denounce comme d'autres l'ont mentionné car il ne se déclenchera pas tant que vous ne vous arrêterez pas de défiler. Ce que vous recherchez s'appelle l'écrêtage.

Voici ce que j'ai trouvé et cela fonctionne bien avec 20 éléments sur mon PC :

var win = $(window);

win.scroll(function() {
     var bottom_of_window = win.scrollTop() + win.height();
     $('.ElementsToBeChanged').each(function(index,el) { 
            var bottom_of_object = $(el).offset().top + $(el).outerHeight();
            if (bottom_of_window > bottom_of_object) {
                $(el).addClass('red');
            }else{
                    $(el).removeClass('red');
            }
        });

});

.ElementsToBeChanged{
  margin:100px;
  height:200px;
  border:1px solid black;
  transition:2s;
}

.ElementsToBeChanged.red{
  background:red;
}

.ElementsToBeChanged
.ElementsToBeChanged
.ElementsToBeChanged
.ElementsToBeChanged
.ElementsToBeChanged
.ElementsToBeChanged
.ElementsToBeChanged
.ElementsToBeChanged
.ElementsToBeChanged
.ElementsToBeChanged
.ElementsToBeChanged
.ElementsToBeChanged
.ElementsToBeChanged
.ElementsToBeChanged
.ElementsToBeChanged
.ElementsToBeChanged
.ElementsToBeChanged
.ElementsToBeChanged
.ElementsToBeChanged
.ElementsToBeChanged

Enfin, utilisez simplement un plugin tel que Skrollr.js ou ScrollMagic