如何推迟解析 jQuery 代码文件？答案

【问题标题】：How to defer parsing the jQuery code file?如何推迟解析 jQuery 代码文件？
【发布时间】：2019-10-23 09:51:11
【问题描述】：

我需要在我的 Shopify theme.liquid 中推迟此代码

 {{ 'jquery.min.js' | asset_url | script_tag | remove: ' type="text/javascript"' }}

任何人都可以帮助如何做到这一点？它在<head>。

我尝试过使用不同的技术，例如

<script src="{{ 'jquery.min.js' | asset_url  }}" defer></script>

  {%- include "include_css" -%}
 {{ 'jquery.min.js' | asset_url | script_tag | remove: ' type="text/javascript"' }}

  <!-- Header hook for plugins ================================================== -->
  {{ content_for_header }}
  <!-- /Header hook for plugins ================================================== -->

当我推迟时，它不会显示一些图片。

【问题讨论】：

标签： jquery shopify jquery-deferred timber

【解决方案1】：

很好的问题

延迟 jQuery 通常是一项艰巨的任务（但通常也是值得的！） - 主题中通常有很多内联代码依赖 jQuery，因此您的图像代码很可能依赖于现在不存在的 jQuery '在内联脚本运行时未加载。

这是正确的语法： <script src="{{ 'jquery.min.js' | asset_url }}" defer></script>

但是，如果您的主题中仍然有原始的| script tag 行，您将加载 jQuery 两次并增加页面的开销，而不是像您想要的那样减少它。在这种情况下可能发生的情况是 jQuery 加载，一些 jQuery 插件被加载到非延迟版本的 jQuery 中，然后你的延迟版本加载并覆盖第一个版本并吹出所有加载的插件。

首先，您需要确保只加载资源的一个版本。接下来，确保所有 jQuery 插件和依赖于 jQuery 的资产也被延迟。最后，您将需要通过您的主题来清理所有内联脚本，以确保您推迟了任何需要预加载 jQuery 的内容。

打开浏览器的控制台并查找与 jQuery 相关的任何错误。然后，您需要进入您的主题文件并推迟这些脚本在 jQuery 启动并运行后运行。

不幸的是，您不能简单地将关键字defer 放在内联脚本标签上——它只适用于指定了src 的脚本。不过，有几种可能的方法可以解决这个问题：

您可以将内联脚本移动到外部脚本标记，可以具有defer 属性。但是请注意，资产文件无法访问大多数 Liquid 变量，因为资产需要可缓存。您可以访问诸如翻译之类的内容，但您无法访问可能会因用户或页面而发生变化的任何内容 - 这包括购物车、产品、收藏，甚至是 shop 变量。
您可以编写一个小的帮助函数来等待加载依赖项，该函数需要一个参数名称和一个函数。如果依赖项在全局范围内，您可以运行该函数，否则使用 setTimeout 并在数百毫秒后重试。
用document.addEventListener('DOMContentLoaded' function(){ /* inline code */ }) 包装内联函数也应该可以工作 - defer'd jQuery 在 DOM 中更高，也可以在 DOMContentLoaded 上运行，但会排在第一位，所以当你的函数得到它的时候打开你的 jQuery 变量将被定义。

祝你好运！

【讨论】：