CODEWITHSUNDEEP
javascriptandroidcssmobile
boozi
boozi

Reputation: 506

Loading CSS through JS

I'm trying to load my non-essential CSS through JS using the code Google provides on their page speed analytics site. The code is:

  var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href = <?php echo "'css/" . $page . "-mobile.css'"; ?>;
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(cb);
  else window.addEventListener('load', cb);

It seems to work well on safari (desktop and mobile), chrome (desktop and mobile) and mozilla (desktop and mobile). But for some reason the browser Samsung uses for Galaxy S4 and below is not loading the css file (though S5 works as predicted, and loads the CSS).

I tried everything and I just think that the built-in browser samsung uses is just crappy.. Would love for any suggestion that might help here, Thanks, Boaz.

Upvotes: 0

Views: 391

Answers (2)

talsibony
talsibony

Reputation: 8766

I had the same problem after viewing the android browser js errors:

about:debug (write it instead the url of the page with the issues)

You want to call cb from request animation frame callback, if it exists adding the checking to each one of them will solve the problem and also renderer it using webkitRequestAnimationFrame instead of onload.

  var raf = false;
  raf = !raf && typeof (requestAnimationFrame) !== 'undefined' ? requestAnimationFrame : raf;
  raf = !raf && typeof (mozRequestAnimationFrame) !== 'undefined' ? mozRequestAnimationFrame : raf;
  raf = !raf && typeof (webkitRequestAnimationFrame) !== 'undefined' ? webkitRequestAnimationFrame : raf;
  raf = !raf && typeof (msRequestAnimationFrame) !== 'undefined' ? msRequestAnimationFrame : raf;
  if (raf) {
    raf(cb);
  }else {
    window.addEventListener('load', cb);
  }

Upvotes: 2

Ben Taylor
Ben Taylor

Reputation: 36

I had exactly the same issue. The S4 was choking on requestAnimationFrame.

removing:

var raf = requestAnimationFrame || mozRequestAnimationFrame ||
  webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);

and just using:

 window.addEventListener('load', cb);

fixed it for me.

Upvotes: 1

Related Questions