CODEWITHSUNDEEP
javascriptcssjquery-isotope
CFitz
CFitz

Reputation: 25

Lazy CSS load breaks JS plugin

need some help figuring out a bug in my website, this is my first forum post about it.

So for the first time I lazy-loaded my CSS into my site below the fold. This works great except it breaks one JS plugin on mobile only, not sure why this is the case. In the portfolio section, all the images are squished very small - the CSS is not being applied and I am not sure why. Thanks for any help!

My site: http://www.fitz-maurice.com
Site's repo: https://github.com/c-fitzmaurice/Fitz
The plugin: http://isotope.metafizzy.co/

Below are the scripts loaded by the page, just before </body> at the very bottom.

<script src="assets/js/jquery.js"></script>
<script src="assets/js/plugins.min.js"></script>
<script src="rs-plugin/js/jquery.themepunch.tools.min.js"></script>
<script src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script src="assets/js/hisrc.min.js"></script>
<script src="assets/js/scripts.min.js"></script>

Then inside of scripts.min.js the below is run.

/* ============== CSS LAZY LOAD ============== */
    function loadCSS(href){
      var ss = window.document.createElement('link');
      var head = window.document.getElementsByTagName('head')[0];

      ss.rel = 'stylesheet';
      ss.href = href;

      // temporarily, set media to something non-matching to ensure it'll fetch without blocking render
      ss.media = 'only x';

      head.appendChild(ss);

      setTimeout( function(){
        // set media back to `all` so that the stylesheet applies once it loads
        ss.media = 'all';
      },0);
    }


    /* ============== PAGE READY FUNCTION ============== */
    $(document).ready(function () {
        jQuery('#preloader').fadeOut(300);
        loadCSS('assets/css/bootstrap.css');
        loadCSS('rs-plugin/css/settings.css');
        loadCSS('assets/css/main.css');
        loadCSS('http://fonts.googleapis.com/css?family=Raleway:400,600,700,300');
        setTimeout(hideFitz, 2000);
    });

enter image description here

Upvotes: 0

Views: 420

Answers (2)

Chris
Chris

Reputation: 92

The problem is you're initializing the the plugin before the css is loaded which makes the plugin calculate the offset values for the squares incorrectly in Safari (You can test this by reducing a safari browser into a really short width and see the problem appear on the desktop version also).

If you wait to initialize isotope until after the CSS loads on Safari everything should work.

Upvotes: 0

posit labs
posit labs

Reputation: 9431

The benefit of loading things like this is a faster initial page load, but I've found that the gains are negligible, and it regularly creates issues.

You might be initially gaining 100ms from this fragmented approach, but overall it increases the time it takes to load the page. There's also a limit to the number of files that can be concurrently loaded (8-ish?), which is another bottleneck to be aware of.

I recommend using a build system like Grunt or Gulp to combine and optimize your files. It will solve your issue and simplify your code.

Upvotes: 1

Related Questions