0

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

CFitz
  • 25
  • 1
  • 7
  • 2
    Lazyloaded how exactly, the images doesn't really help us understand your code ? – adeneo Jan 23 '15 at 19:00
  • You're going to need to be more specific (what exactly is the bug, and where do you think it is). I don't enjoy having to crawl through codebases to find a stranger's bugs and I doubt I'm alone. – taylorc93 Jan 23 '15 at 19:02
  • Sorry about that @adeneo - Went ahead and got more info in there for you. – CFitz Jan 23 '15 at 19:34
  • @taylorc93 - Let me know if you need more information, and thanks for the help! – CFitz Jan 23 '15 at 19:34
  • Why would you lazy load CSS? I could see lazy loading images but CSS should load relatively fast, especially if it's minified and concatenated. Lazy loading it is just going to cause you headaches. The answer below advising you to use grunt or gulp is your best option. – ReLeaf Jan 24 '15 at 01:42

2 Answers2

1

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.

Community
  • 1
  • 1
posit labs
  • 8,951
  • 4
  • 36
  • 66
0

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.

Chris
  • 92
  • 6