So right now whenever I resize the browser, scripts are not loaded, and the idea is only to load them for non mobile screen size. I know I could just use the scripts in the footer but then they will be loaded for mobile, maybe I can force them to be reloaded? Current code:
<script defer type="text/javascript">
window.addEventListener("resize", getTemplate);
CurrentPage = 'MobilePage';
function getTemplate() {
if (screen.width >= 767 && CurrentPage != 'DesktopPage') {
fetch('<?php bloginfo('template_url'); ?>/portafolio-desktop-slider.php')
.then(response => response.text())
.then( resultText => document.getElementById('example').innerHTML = resultText );
var head = document.getElementsByTagName('head')[0];
var body = document.getElementsByTagName('body')[0];
var VueScript = document.createElement("script");
VueScript.src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.7/vue.js";
VueScript.async = false;
head.appendChild(VueScript);
var CarouselScript = document.createElement("script");
CarouselScript.src = "https://wlada.github.io/vue-carousel-3d/js/carousel-3d.umd.js";
CarouselScript.async = false;
body.appendChild(CarouselScript);
setTimeout(function(){
var VueInitScript = document.createElement("script");
VueInitScript.async = false;
VueInitScript.src = "<?php bloginfo('template_url'); ?>/vue-init.js";
body.appendChild(VueInitScript);
}, 500);
// cierre carga de scripts
}
if (screen.width < 767 && CurrentPage != 'MobilePage') {
fetch('<?php bloginfo('template_url'); ?>/portafolio-mobile.php')
.then(response => response.text())
.then( resultText => document.getElementById('example').innerHTML = resultText )
}
}
getTemplate();
</script>