conditionally load js file with screen width

Question

I have the below java-script which loads the screen as per the resolution and js file. But I have to refresh the browser to reload the js file as per resolution otherwise it keeps the last resolution js file.

Please help me to understand how to load both at once.

window.requestAnimFrame = (function(){
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
})();

var width = screen.width,
    height = screen.height,
    checkScreenSize = function () {
        if (screen.width !== width || screen.height !== height) {
            width = screen.width;
            height = screen.height;
            $(window).trigger('resolutionchange');
        }
    };

(function loop(){
  requestAnimFrame(loop);
  checkScreenSize();
})();

function includeJS(incFile) {
document.write('<script type="text/javascript" src="'+ incFile+ '"></scr' + 'ipt>');
}

if (window.matchMedia("only screen and (min-width: 1240px) and (max-width: 1280px)").matches) {
    includeJS('changer/js/changer-1280.js');
} else if (window.matchMedia("only screen and (min-width: 1390px) and (max-width: 1440px)").matches) {
    includeJS('changer/js/changer-1440.js');
} else if (window.matchMedia("only screen and (min-width: 1441px) and (max-width: 1441px)").matches) {
    includeJS('changer/js/changer-1441.js');
}

Answer 1

Sounds like you want to watch the window resize event maybe? Something like this:

$(window).on('resize', function() {
  if (window.matchMedia("only screen and (min-width: 1240px) and (max-width: 1280px)").matches) {
    $.getScript('changer/js/changer-1280.js');
  } else if (window.matchMedia("only screen and (min-width: 1390px) and (max-width: 1440px)").matches) {
    $.getScript('changer/js/changer-1440.js');
  } else if (window.matchMedia("only screen and (min-width: 1441px) and (max-width: 1441px)").matches) {
    $.getScript('changer/js/changer-1441.js');
  }
});

Since you're using jQuery anyway, you can use its $.getScript instead of injecting the script element manually.

I see there's some code there that seems to watch the window height and width to implement a custom window resize event. That's not really necessary though. I think you would especially not want to do that during a RAF loop like that since it's probably triggering a layout during every single frame.

Running those matchMedia checks every time the window's resize event fires will bog down resizing performance too, so you should debounce and only handle the event after there's a pause in resizing. Something like this:

var resizeTimer;

$(window).on('resize', function() {
  clearTimeout(resizeTimer);

  // Wait half a second before reacting to the resize event,
  //  in case the user is still actively resizing the window.
  resizeTimer = setTimeout(handleWindowResize, 500);
});

function handleWindowResize() {
  if (window.matchMedia("only screen and (min-width: 1240px) and (max-width: 1280px)").matches) {
    $.getScript('changer/js/changer-1280.js');
  } else if (window.matchMedia("only screen and (min-width: 1390px) and (max-width: 1440px)").matches) {
    $.getScript('changer/js/changer-1440.js');
  } else if (window.matchMedia("only screen and (min-width: 1441px) and (max-width: 1441px)").matches) {
    $.getScript('changer/js/changer-1441.js');
  }
}