En aquesta ocasió parlaré d’un fragment de jQuery que m’ha facilitat la feina d’optimitzar la càrrega d’una pàgina plena d’elements <iframe>.

La pàgina, dissenyada amb una navegació vertical, requeria carregar iframes a mesura que es navega cap avall.

El problema: com que carregava contínuament, com més avall navegava, més lenta es tornava la pàgina web.

La solució: eliminar del DOM, aquells iframes que actualment no apareguin en pantalla, i mostrar només aquells que sí.

Ara bé… Com es fa?

Recerca

La cerca em va portar a un fòrum de Medium. Hi podeu entrar a través del botó següent:

L’autor del post, mostra un exemple a CodePen basat en els scripts següents:

HTML
<div id="fixed-red" class="fixed-red red-active"></div>
<div id="fixed-green" class="fixed-green"></div>
<div id="fixed-blue" class="fixed-blue"></div>
<div id="red" class="color"></div>
<div id="green" class="color"></div>
<div id="blue" class="color"></div>
JAVASCRIPT
$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();
  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).on('resize scroll', function() {
  $('.color').each(function() {
  var activeColor = $(this).attr('id');
  if ($(this).isInViewport()) {
      $('#fixed-' + activeColor).addClass(activeColor + '-active');
    } else {
      $('#fixed-' + activeColor).removeClass(activeColor + '-active');
    }
  });
});

En termes generals, el script diferencia en quin moment l’objecte que volem és visible per pantalla (des del primer píxel i fins l’últim) i en quin moment ja no. Així, es poden diferenciar aquelles accions que cal executar en cada moment.

Per utilitzar aquests scripts cal que tingueu jQuery enllaçat al vostre HTML. En el meu cas, després d’adaptar-ho degudament al projecte, va funcionar correctament.

Salut!