Скрипты js не работают при их вызове
Приветствую, ребят нужны помощь, я junior-разработчик и не могу понять почему при подключение js-скрипта в html он не работает. Пытаюсь вызвать одну из функций в консоле мне выводиться такое сообщение "lazyloadInit is not defined". Всё компилируется через gulp
html {{!-- This is the base layout for your project, and will be used on every page unless specified. --}} <!doctype html> <html class="no-js" lang="ru"> <head> <meta charset="utf-8"/> <meta http-equiv="x-ua-compatible" content="ie=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <title> {{meta-title}} </title> <!--<link rel="stylesheet" href="{{root}}assets/css/app-author.css?v=1" />--> <link rel="stylesheet" href="{{root}}assets/css/app.css?v=1" /> <link rel="stylesheet" href="{{root}}assets/css/app-mobile.css?v=1" media="(max-width: 992px)" /> <link rel="stylesheet" href="{{root}}assets/css/app-desktop.css?v=1" media="(min-width: 992px)" /> <!--<link rel="stylesheet" href="{{root}}assets/css/app-tag.css?v=1"/> <link rel="stylesheet" href="{{root}}assets/css/app-mobile-tag.css?v=1"/>--> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&family=Roboto:wgh t@400;700&display=swap" rel="stylesheet"> </head> <body class="{{layout}} page-{{page}} js-stickybit-parent parent"> <!-- [class="{{page}} {{layout}}"] --> {{> scroll-to-top}} {{> header}} <main class="main"> {{> body}} </main> {{> footer}} {{> popup-special}} <script src="{{root}}assets/js/app.js"></script> </body> </html> js import $ from "jquery"; window.jQuery = $; import 'bootstrap'; const lazyload = require('lazyload/lazyload.min.js'); import Swiper, { Navigation, Pagination, Thumbs, Controller } from 'swiper'; Swiper.use([Navigation, Pagination, Thumbs, Controller]); require('./vendor/sticky/jquery.sticky.js'); import libs from './lib/dependencies'; window.libs = libs; window.lazyload = lazyload; $(document).ready(function() { $.fn.removeClassName = function(mask) { return this.removeClass(function(index, cls) { let re = mask.replace(/\*/g, '\\S+'); return (cls.match(new RegExp('\\b' + re + '', 'g')) || []).join(' '); }); }; const $win = jQuery(window); const $doc = jQuery(document); const mdSize = 767; let isMobile = $win.outerWidth() <= mdSize; let lazyloadInit = function lazyloadInit() { $('img.lazyload').lazyload(); }; lazyloadInit(); // Sticky const stickyInit = function stickyInit() { const $stick = jQuery('.js-stick:not(.stick-init)'); // , .js-stick-right-side:not(.stick-init) const $header = jQuery('.header'); const $stickHeader = $header.find('.js-stick-header'); let headerH = 0; $stickHeader.each(function(index) { headerH += jQuery(this).outerHeight(); }); if (!isMobile) { window.libs.stickybits('.js-stickybit', { stickyBitStickyOffset: headerH + 50 }); } }; stickyInit(); // Stick Header (function() { const $header = $('.header:eq(0)'); // or header:eq(1) // Sticky const stickyHeaderInit = function stickyHeaderInit() { const $stick = $('.js-stick-header'); $stick.each(function(index = 0) { const $this = $(this); const options = { parent: 'body', offset_top: index > 0 ? 30 : 30 }; if (!isMobile) { $(this) .sticky({ topSpacing: 0 }) .on('sticky-start', function() { if(index === 0) $header.addClass("isSticky"); $this.addClass('is_stuck'); }) .on('sticky-end', function() { // console.log("Ended"); if(index === 0) $header.removeClass('isSticky'); $this.removeClass('is_stuck'); }); } }); }; stickyHeaderInit(); $win .scroll(function (){ stickyHeaderInit(); }) .trigger('scroll') $win .resize(function (){ stickyHeaderInit(); }) .trigger('resize'); setTimeout(function() { $win.trigger('scroll'); $win.trigger('resize'); }, 0); }()); let galleryMini = new Swiper('.gallery-mini', { modules: [Thumbs], spaceBetween: 10, loop: false, slidesPerView: 4, watchSlidesProgress: true, }); let galleryText = new Swiper('.gallery-text', { modules: [Controller], slidesPerView: 1, spaceBetween: 6, freeMode: true, loop: true, thumbs: { swiper: galleryMini } }); let gallery = new Swiper('.gallery', { modules: [Navigation, Pagination,Thumbs, Controller], navigation:{ nextEl: '.gallery-next', prevEl: '.gallery-prev', }, pagination: { el: '.gallery-pagination', type: 'fraction', }, thumbs: { swiper: galleryMini }, loop: true, speed: 800, slidesPerView: 1, }); gallery.controller.control = galleryText; galleryText.controller.control = galleryMini; galleryText.controller.control = gallery; // Scroll To Top (function() { const $scrollToTop = $('.scroll-to-top'); const winH = $win.innerHeight(); $scrollToTop.on('click', function(e) { e.preventDefault(); var $bodyelem = $('html, body'); if( /.*Version.*Safari.*/.test(navigator.userAgent) ) { $bodyelem = $('body'); } $bodyelem.animate({ scrollTop: 0 }, { queue: false, duration: 500, easing: 'linear' }); }); $win.on('scroll', function(){ const currentScroll = $win.scrollTop(); $scrollToTop[currentScroll > 2 * winH ? 'addClass' : 'removeClass']('active'); }); }()); /** * All Ajax Request complete */ (function() { const send = XMLHttpRequest.prototype.send XMLHttpRequest.prototype.send = function() { this.addEventListener('load', function() { stickyInit(); lazyloadInit(); }) return send.apply(this, arguments) } }()); }, false); |
Если ты пытаешься в консоли вызвать lazyloadInit то естественно оно not defined, т.к. оно заданно в локальной области видимости модуля, которая тебе не доступна:
let lazyloadInit = ... Тебе должно быть доступно то, что заданно глобально: window.jQuery window.libs window.lazyload Почему оно не работает само по себе? Точно сказать нельзя, но 99% на то, что ты подключаешь скрипт в head, и в таком случае $('img.lazyload').lazyload(); не может сработать, так как никакого 'img.lazyload' на станице ещё нет. Скрипт не ждёт полной загрузки страницы чтоб сработать, он выполняется с тем куском загруженной разметки, какой есть на момент исполнения. Поскольку у тебя есть jquery, то можешь воспользоваться предоставляемой им из коробки способом дождаться загрузки: lazyloadInit(); заменить на $(lazyloadInit); или сразу без переменных: $(function lazyloadInit() { $('img.lazyload').lazyload(); }); P.S. В следующий раз для форматирования кода используй [JS][/JS] |
Немного не понятно следующее
Цитата:
А если это модуль, то он должен подключаться как модуль <script src="{{root}}assets/js/app.js" type="module"></script> Если это модуль, то не надо подключать его в конце <body>. Надо в начале, в head. Модули загружаются параллельно с загрузкой и парсингом html. Так же в модулях не требуется ожидания готовности DOM. Они ВСЕГДА начинают исполняться, когда html загружен и DOM готов. |
voraa, ну он же пишет - "компилируется через gulp", так что скорее всего никаких там модулей.
Но твой ответ заставил глянуть ещё раз, и вижу что оно в конце body подключается, а значит моё предположение про head - не верно, и тогда хз в чём там причина.) |
Часовой пояс GMT +3, время: 01:49. |