Отличный вопрос
Откладывание 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 будет определена.
Удачи!