How to use Fetch API to retrieve a different html file, based on screen size, and display it in a div

Question

I'm optimizing my site for load speed and I'm trying to display two different image galleries: SwiperJS for mobile devices, and DriftJS for desktop devices.

The catch is these libraries are heavy and I don't want to load one if its not needed (driftJS on a mobile device or SwiperJS on a desktop) meaning that having both in the HTML file and using display: none; to hide the one that's not needed, is out of the question

I have a div

  <div id="productImage">
  </div>

The goal is to change the item that productImage div displays based on screen size - so that it will display swiper.html photo gallery if the screen size is less then 800 pixels and display the drift.html photo gallery if the screen size is above 800 pixels.

I would prefer it swap between as the screen resizes to make sure its responsive, but beggers cant be choosers and whats really importiant is that it loads the correct image gallery on the correct screen size.

Things that I've Tried:

From

How to fetch a particular div from one html file and place it in other html file using normal JavaScript?

I've tried using

ar imageBox = document.getElementById("product-image")
.forEach.call(document.imageBox), function(imageBox) {
    if (window.innerWidth < 800 ) {
              var driftLink = document.createElement('htmlRef'); 
              driftLink.rel = 'import';   
              driftLink.href = 'drift.html';  
              imageBox.appendChild(driftLink);  
 }
      else {
         var swiperLink = document.createElement('htmlRef'); 
              swiperLink.rel = 'import';   
              swiperLink.href = 'swiper.html';  
              imageBox.appendChild(swiperLink);
      }
  });

but html imports are depreciated and don't work anymore as of February 2020

I've also tried

 var imageBox = document.getElementById("product-image")
.forEach.call(document.imageBox), function(imageBox) {
    if (window.innerWidth < 800 ) {
        fetch("driftbox.html")
         .then(response => response.text())  
         .then(html => {
         imageBox.innerHTML = html;
         console.log(html);
         })
.catch((err) => console.log("Can’t access " + url + " response. Blocked by browser?" + err));
      }
      else {
        fetch("swiper.html")
        .then(response => response.text())  
        .then(html => {
        imageBox.innerHTML = html;
        console.log(html);
        })
.catch((err) => console.log("Can’t access " + url + " response. Blocked by browser?" + err));
      }
  });

And for debugging sake I tried it using XML (despite also being depreciated) but no avail.

var imageBox = document.getElementById("product-image")
.forEach.call(document.imageBox), function(imageBox) {
    if (window.innerWidth < 800 ) {
            if (!window.XMLHttpRequest && 'ActiveXObject' in window) {
             window.XMLHttpRequest= function() {
             return new ActiveXObject('MSXML2.XMLHttp');
             };
             }
             var xhr= new XMLHttpRequest();
             xhr.open('GET', 'drift.html', true);
             xhr.onreadystatechange= function() {
             if (this.readyState!==4) return;
             if (this.status!==200) return;
             imageBox.innerHTML= this.responseText;
             };
             xhr.send(); }
      else {
        
             if (!window.XMLHttpRequest && 'ActiveXObject' in window) {
             window.XMLHttpRequest= function() {
             return new ActiveXObject('MSXML2.XMLHttp');
             };
             }
             var xhr= new XMLHttpRequest();
             xhr.open('GET', 'swiper.html', true);
             xhr.onreadystatechange= function() {
             if (this.readyState!==4) return;
             if (this.status!==200) return; // or whatever error handling you want
             imageBox.innerHTML= this.responseText;
             };
             xhr.send();
      }
  });

From my understanding I should be using an eventListener to gauge the screen width and Fetch API to retrieve either HTML file but I'm not entirely sure.

score 0 · Answer 1 · answered Aug 05 '20 at 07:04

Got it!

function swiper() {
  fetch("swiper.html")
  .then(response => response.text())  
  .then(html => {
  imageBox.innerHTML = html;
  console.log(html);
  })
  .catch((err) => console.log("Can’t access " + url + " response. Blocked by browser?" + err));
}

function drift() {
  fetch("drift.html")
  .then(response => response.text())  
  .then(html => {
  imageBox.innerHTML = html;
  console.log(html);
  })
  .catch((err) => console.log("Can’t access " + url + " response. Blocked by browser?" + err));
}

var widths = [0, 800];

function resizeFn() {
if (window.innerWidth>=widths[0] && window.innerWidth<widths[1]) {
swiper();
} else {
drift();
}
}
window.onresize = resizeFn;
resizeFn();

Works

How to use Fetch API to retrieve a different html file, based on screen size, and display it in a div

1 Answers1