|
Скрипты 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);
|
