Loading CSS through JS

Question

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.

Your code is inserting your link element before the head element. Should it? Try replacing h.parentNode.insertBefore with h.appendChild. Or if your css file must be the inserted as the first element of head, try h.insertBefore(l, h.firstChild). — rojo
– rojo, Commented Nov 24, 2014 at 18:54
I tried what you suggested, but it seems the iOS6 doesn't apply the CSS if it's loaded after the page is ready with the appendChild method..Is it a really a good way to solve loading time issues? — boozi
– boozi, Commented Nov 30, 2014 at 16:51
What happens if you replace else window.addEventListener('load', cb); with else cb();? I don't see any worthwhile benefit to defer appendChild until page load is complete. If that doesn't satisfy iOS either, then try document.body.appendChild and see what happens. — rojo
– rojo, Commented Nov 30, 2014 at 22:02

talsibony · Accepted Answer · 2015-01-05 07:25:01Z

2

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);
  }

answered Jan 5, 2015 at 7:25

talsibony

8,7966 gold badges49 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ben Taylor · Accepted Answer · 2014-12-23 21:01:33Z

1

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.

answered Dec 23, 2014 at 21:01

Ben Taylor

363 bronze badges

Collectives™ on Stack Overflow

Loading CSS through JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related