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?[/vc_column_text][vc_text_separator title=”Recerca” align=”align_left” border_width=”2″][vc_column_text]La cerca em va portar a un fòrum de Medium. Hi podeu entrar a través del botó següent:[/vc_column_text][vc_btn title=”Veure el fòrum (Meduim)” style=”3d” color=”inverse” i_icon_fontawesome=”fa fa-medium” add_icon=”true” link=”url:https%3A%2F%2Fmedium.com%2Ftalk-like%2Fdetecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2|title:Ves-hi|target:%20_blank|”][vc_column_text]L’autor del post, mostra un exemple a CodePen basat en els scripts següents:[/vc_column_text][vc_custom_heading text=”HTML” font_container=”tag:h5|text_align:left” google_fonts=””][vc_column_text]
<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>[/vc_column_text][vc_custom_heading text=”JAVASCRIPT” font_container=”tag:h5|text_align:left” google_fonts=””][vc_column_text]
$.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');
}
});
});
[/vc_column_text][vc_column_text]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![/vc_column_text][/vc_column][/vc_row]
