Question

我有一个项目，其中我使用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函数（来自package.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-src 不会更改为 img src 。结果没有图像加载。

Filters.js是具有功能的经典js文件，因此我无法使用require（'lozad'）来调用观察者。会抛出错误'Uncaught ReferenceError：未定义''是否有一种相当简单的方法来访问lozad并调用观察者而不将所有内容都放在一个js文件中？

如何通过视图文件在稍后包含的其他js文件中使用laravel-mix文件（webpack）中的js函数？

0 个答案: