javascript - 延迟 CSS 加载中断 JS 插件

Question

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

因此，我第一次将我的 CSS 延迟加载到我的网站中。这很好用，除了它只在移动设备上破坏了一个 JS 插件，不知道为什么会这样。在投资组合部分，所有图像都被压得很小——CSS 没有被应用，我不确定为什么。感谢您的帮助!

我的网站:http://www.fitz-maurice.com
网站的 repo :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

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

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

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