Responsive Design - How not to load certain scripts?

StackOverflow https://stackoverflow.com/questions/9168707

Question

Have finally got a responsive site working (of a fashion). What I want to do now is reduce what scripts are loaded on the mobile devices, so that they load faster. The scripts are redundant on the mobiles so it seems a good place to start.

Is there a way of only loading certain scripts depending on the device?

The site is a 3rd party e-commerce site, which doesn't allow different versions of the page for different devices. The server-side language is progress' e-script (of which I know nothing).

Any help would be much appreciated!!

Was it helpful?

Solution

Modernizr does feature detection and can conditionally load resources. It's more or less standard for this kind of thing unless you roll out your own.

OTHER TIPS

You could always try linking to the other JavaScripts using JavaScript, and include checks for which browser the user is using.

This page has some information about Dynamic Script Loading, which is what I believe you are looking for: http://unixpapa.com/js/dyna.html

How big are these script files? You shouldn't need to worry about anything less than half a megabyte on mobile devices (as long as they're loaded at the bottom of the page).

Otherwise, a server-sided solution will probably work best:

How do I determine whether it's a mobile device with PHP?

Suppose you have a three column desktop layout like this:

<body>
  <div id="ad-1">
  //javascript1 goes here
  </div>
  <div id="content">
  //content goes here
  </div>
  <div id="ad-2">
  //javscript2 goes here
  </div>
</body>

And suppose that you've created a responsive site such that:

@media screen and (max-width: 1024px) {
  #ad-1{ display: none; }
}
@media screen and (max-width: 768px) {
  #ad-2{ display: none; }
}

You don't want to load the scripts if they aren't visible, so here's a way to solve that:

var ResponsiveScriptsLoader = {

onAdsReady: function() {
  console.log('success');
},

addScripts: function(scripts, callback) {
  for (var i = 0; i < scripts.ads.length; i++) {
    this.include(scripts.ads[i].src, scripts.ads[i].selectorID);
    if(i==scripts.ads.length-1) callback();
  }
},

include: function(what, where) {
    var deferred = new $.Deferred(), place;
    var e = document.createElement('script');
    e.onload = function () { deferred.resolve(); };
    e.src = what;
    place = document.getElementById(where);
    if(place) {
        place.appendChild(e);
    }
    return deferred.promise();
},

init: function(){
if(screen.width > 768){ 
    if(screen.width > 1024){
        this.addScripts({
        ads: [
        {
            src: "http://ads.script1.js",
            selectorID: "ad-1"
        }, 
        {
            src: "http://ads.script2.js",
            selectorID: "ad-2"
        }
        ]}, this.onAdsReady);
    } else{ // Screen size is between 769 and 1023
        this.addScripts({
        ads: [
        {
            src: "http://ads.script2.js",
            selectorID: "ad-2"
        }
        ]}, this.onAdsReady);
      }
    }
}
}   

ResponsiveScriptsLoader.init();
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top