Lazy CSS load breaks JS 插件

Question

需要一些帮助找出我网站中的错误，这是我的第一个论坛 post。

因此，我第一次将 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 个左右？）的数量也有限制，这是另一个需要注意的瓶颈。

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

Answer 2

问题是您在加载 css 之前初始化插件，这使得插件在 Safari 中错误地计算正方形的偏移值（您可以通过将 safari 浏览器缩小为真的很短宽度，看到问题也出现在桌面版本上）。

如果等到 CSS 在 Safari 上加载后才初始化同位素，一切都应该正常。

Lazy CSS load breaks JS 插件

Lazy CSS load breaks JS plugin

javascript

css

jquery-isotope