Cargar con JavaScript librerías y archivos externos solo a petición

Para no afectar la velocidad a que cargan las páginas y el rendimiento en general de nuestro sitio, en algunas ocasiones queremos lograr que librerías externas o script carguen solo a petición, con algún evento.
En este artículo muestro dos ejemplos de cómo lo hago en otras páginas de este sitio.
En el primero de ellos inserto una publicación de Twitter al presionar un botón y en el segundo un script de otro servicio que escribe y carga un gráfico, pero solo al desplazarnos por la página hasta su ubicación.

Cargar e insertar widget de Twitter

Al presionar el siguiente botón se inserta a continuación un widget mostrando el timeline de la cuenta de Twitter Frases de Amor, del autor.
Para eso es necesario cargar también el script "widgets.js" desde Twitter.
¡Pruébalo!
Mostrar Código HTML para el botón, el contenedor DIV donde se escribe el timeline y el script de la función para que funcione.

<button type="button" id="boton" onclick="mostrartw()">Mostrar</button>
<div id="frases"></div>
<script>
function mostrartw(){
widgt = '<a rel="nofollow noopener" class="twitter-timeline" data-lang="es" data-tweet-limit="3" href="https://twitter.com/FrasesNorfiPC?ref_src=twsrc%5Etfw">Tweets de FrasesNorfiPC</a>';
document.getElementById('frases').innerHTML= widgt;
document.getElementById('boton').style.display='none';
var s = document.createElement('script');
        s.setAttribute('type', 'text/javascript');
        s.src = 'https://platform.twitter.com/widgets.js';
        document.getElementById('frases').appendChild(s);
}
</script>

Cargar e insertar un script, al desplazarnos hasta este punto de la página

Al desplazarse hasta este punto exacto de la página, se carga automáticamente el archivo JavaScript desde los servidores del servicio de "flourish.studio", que escribe el gráfico que se muestra a continuación.

<div id="cargars"></div>
<div class="flourish-embed flourish-scatter" data-src="visualisation/1299991"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
var scrollFromTop = $("#cargars").offset().top;
$(document).scroll(function () {
    if ($(this).scrollTop() + $(window).height()  > scrollFromTop) {	   
        var s = document.createElement('script');
        s.setAttribute('type', 'text/javascript');
        s.src = 'https://public.flourish.studio/resources/embed.js';
        document.getElementById('cargars').appendChild(s);
    }
});
</script>

Código HTML del contenedor que se debe situar en el lugar exacto de la página, donde al desplazarnos se comienza a cargar el script externo.
Debe estar situado varias líneas más arriba que el contenedor donde se escriben los datos.
Es imprescindible también cargar la librería JQuery.
No te confíes la que indica el código y verifica si existe una más reciente.
Siempre cárgala desde un CDN.

Comprobar el funcionamiento

Se puede comprobar en el navegador Google Chrome el funcionamiento de ambos métodos.
Solo es necesario abrir la herramienta usando la combinación de teclas Control + Shift + J y en ella la pestaña "Network".
Recarga la página y comprueba los scripts que se cargan al presionar el botón y después al desplazarnos hacia abajo.

Páginas relacionadas



Comparte

Sígueme en las redes sociales