У меня есть проект, в котором я использую laravel mix для создания одного уменьшенного js файла, используемого на всей странице.
const mix = require('laravel-mix');
mix.config.publicPath = 'public_html';
mix.js([
'public_html/themes/sagafrontend/js/jquery-1.9.1.js',
'public_html/themes/sagafrontend/js/jquery-ui.js',
'public_html/themes/sagafrontend/js//main.js',
'public_html/themes/sagafrontend/js/bootstrap.min.js',
'public_html/themes/sagafrontend/js/custom.js',
'public_html/themes/sagafrontend/js/custom2.js',
], 'public_html/themes/sagafrontend/js/app.js')
.version();
Минимизированный файл содержит функцию lozad (из зависимости в пакете. json ), который использует обозреватель для отложенной загрузки изображений на всю страницу.
var lozad = require('lozad');
var observer = lozad();
observer.observe();
На странице продукта я добавил новую функцию фильтрации, которая вызывает ajax для фильтрации продуктов на данной странице списка продуктов. В короткой версии это выглядит так:
function filterProducts(filterVariables) {
var path = '/productFilter';
$.ajax({
type: 'post',
url: path,
dataType: 'json',
data: {
filterVariables: filterVariables
},
success: function (data) {
$('.filter-container').empty().append(data.products);
},
error: function (xhr, status, thrown) {
}
});
}
И все отлично работает - товары добавляются на страницу через ajax. Функции фильтра находятся в отдельном файле , загруженном в laravel представление , потому что я использую фильтры только в один просмотр , поэтому нет нужно поместить весь код в глобальный файл min (этот сгенерирован с помощью laravel mix).
@section('pageScripts')
<script src="{{ asset('themes/sagafrontend/js/filters.js') }}" defer></script>
@endsection
Проблема в том, что продукты, добавленные на страницу, не видны для наблюдателя, а пути к изображениям не обновляются. Поэтому после вызова фильтров img data-sr c не изменяется на img sr c. В результате изображения не загружаются.
Фильтры. js - это класс c js файл с функциями, поэтому я не могу использовать require ('lozad') для вызова наблюдателя для него. Он выдаст ошибку 'Uncaught ReferenceError: require is notfined' Есть ли довольно простой способ получить доступ к lozad и вызвать обозреватель, не помещая все в один js файл?