懒惰的CSS加载破坏JS插件

Question

需要一些帮助来找出我网站上的错误，这是我关于它的第一篇论坛帖子。

所以我第一次把我的CSS懒得加载到我的网站下面。这很好用，除了它只在移动设备上打破一个JS插件，不知道为什么会这样。在投资组合部分，所有图像都被压得很小 - CSS没有被应用，我不知道为什么。谢谢你的帮助！

我的网站：http://www.fitz-maurice.com
网站的回购：https://github.com/c-fitzmaurice/Fitz
插件：http://isotope.metafizzy.co/

以下是页面加载的脚本，就在最底部的</body>之前。

<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>

然后在scripts.min.js内部运行。

/* ============== 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);
    });

Answer 1

加载这样的东西的好处是初始页面加载速度更快，但我发现收益可以忽略不计，并且经常会产生问题。

您最初可能会从这种分散的方法中获得100毫秒，但总体而言，它会增加加载页面所需的时间。 files that can be concurrently loaded（8-ish？）的数量也有限制，这是另一个需要注意的瓶颈。

我建议使用Grunt或Gulp等构建系统来合并和优化您的文件。它将解决您的问题并简化您的代码。

Answer 2

问题是你在加载css之前正在初始化插件，这使得插件在Safari中错误地计算了正方形的偏移值（你可以通过将safari浏览器减少到一个非常短的宽度来测试它，看看问题也出现在桌面版上）。

如果你等待初始化同位素直到在CSS加载Safari之后，一切都应该有效。