I have an external Javascript that should only load if the user scrolls (as it is otherwise not relevant). I've tried with the below script, but I struggle to get it working:
<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>
I ended up using below script, which also enables us to load scripts based on both screen-width and the scroll behavior. This is because some scripts are always within the viewport on large screensizes, while they're always outside the viewport on small screensizes.
<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>