Tengo un Javascript externo que solo debería cargarse si el usuario se desplaza (ya que de lo contrario no es relevante). Lo he intentado con el siguiente script, pero me cuesta hacerlo funcionar:
<script> window.onscroll = function() { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'script.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); } </script>Terminé usando el siguiente script, que también nos permite cargar scripts basados tanto en el ancho de pantalla como en el comportamiento de desplazamiento. Esto se debe a que algunas secuencias de comandos siempre están dentro de la ventana gráfica en tamaños de pantalla grandes, mientras que siempre están fuera de la ventana gráfica en tamaños de pantalla pequeños.
<script> (function () { var elem = document.body var verticalPos = () => document.scrollingElement.scrollTop var whereToSpawn = document.head var n = 200 var neverLoadedBeforeAlsoBought = 1 var neverLoadedBeforeInfiniteOptions = 1 var neverLoadedBeforeMobile = 1 // load Infinite Options once elem.onload = function () { if (neverLoadedBeforeInfiniteOptions && screen.width > 749) { neverLoadedBeforeInfiniteOptions = 0 var myElem1 = document.createElement('script') myElem1.src = "infinite_options.js" myElem1.async = true; myElem1.defer = true whereToSpawn.appendChild(myElem1) } } elem.onscroll = function () { // For mobile screens, delay both Infinite Options and Also Bought until sroll if (verticalPos() >= n && neverLoadedBeforeMobile && screen.width < 750) { neverLoadedBeforeMobile = 0 var myElem2 = document.createElement('script') myElem2.src = "infinite_options.js" myElem2.async = true; myElem2.defer = true whereToSpawn.appendChild(myElem2) var myElem3 = document.createElement('script') myElem3.src = "also_bought.js" myElem3.async = true; myElem3.defer = true whereToSpawn.appendChild(myElem3) } // For large screens, delay only Also Bought (Infinite Options is loaded immediately here) else if (verticalPos() >= n && neverLoadedBeforeAlsoBought && screen.width > 749) { neverLoadedBeforeAlsoBought = 0 var myElem4 = document.createElement('script') myElem4.src = "also_bought.js" myElem4.async = true; myElem4.defer = true whereToSpawn.appendChild(myElem4) } } })() </script>