Как отложить анализ файла кода JQuery? - PullRequest
Новая
       14

Как отложить анализ файла кода JQuery?

1 голос
/ 08 июня 2019

Мне нужно отложить этот код в моем 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 ================================================== -->

Когда я откладываю, он не показывает некоторые картинки.

1 Ответ

0 голосов
/ 11 июня 2019

Отличный вопрос

Откладывание 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, так как ресурс должен быть кэшируемым. Вы можете получить доступ к вещам, таким как переводы, но вы не можете получить доступ к чему-либо, что может измениться в зависимости от пользователя или страницы - это включает корзину, продукты, коллекции и даже переменную магазина.
  • Вы можете написать небольшую вспомогательную функцию для ожидания загрузки зависимостей, которая будет принимать имя параметра и функцию. Если зависимость находится в глобальной области видимости, вы можете запустить функцию, в противном случае используйте setTimeout и повторите попытку через несколько сотен миллисекунд.
  • Обертывание встроенной функции с document.addEventListener('DOMContentLoaded' function(){ /* inline code */ }) также должно работать - defer 'jQuery, будучи выше в DOM, будет также работать на DOMContentLoaded, но будет первым в строке, поэтому, когда ваша функция получает свою включите вашу переменную jQuery будет определена.

Удачи!

...