如何在Laravel Mix打包外的JS文件中调用其包含的lozad函数？

嘿，这个场景我太熟悉了！因为lozad的观察者只会监听页面初始加载时的DOM元素，AJAX动态添加的内容它不会自动扫描。而且你不想合并所有JS文件，那咱们可以用以下几个简单的办法来解决：

方案1：把lozad挂载到全局window对象 #

既然你的全局压缩JS（app.js）里已经引入了lozad，那只需要在那里把lozad暴露到全局，这样filters.js里就能直接调用它了。

修改app.js中的代码：

var lozad = require('lozad');
// 将lozad挂载到全局window对象
window.lozad = lozad;

var observer = lozad();
observer.observe();

然后在filters.js的AJAX成功回调里，重新调用observe()来扫描新添加的元素：

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);
 // 重新触发lozad的扫描
 window.lozad().observe();
 },
 error: function (xhr, status, thrown) { }
 });
}

方案2：复用已有的lozad观察者实例 #

如果不想把整个lozad库暴露到全局，也可以把初始化好的观察者实例挂载到window，这样能复用同一个实例，避免重复创建：

修改app.js：

var lozad = require('lozad');
// 将观察者实例挂载到全局
window.lozadObserver = lozad();
window.lozadObserver.observe();

然后在filters.js里直接调用这个实例的observe()：

success: function (data) {
 $('.filter-container').empty().append(data.products);
 // 复用全局的观察者实例
 window.lozadObserver.observe();
}

方案3：只扫描新添加的DOM元素 #

如果想更高效一点，也可以只针对AJAX加载的新内容进行扫描，不用重新扫整个页面：

先按方案1把lozad挂载到window，然后修改filters.js的回调：

success: function (data) {
 var $filterContainer = $('.filter-container');
 $filterContainer.empty().append(data.products);
 // 只扫描新添加的内容里的lozad目标元素
 window.lozad($filterContainer.find('[data-src]')).observe();
}

这几种方案都不用合并所有JS文件，只需要在全局压缩的app.js里做一点点修改，就能让filters.js顺利调用lozad的方法啦。

内容的提问来源于stack exchange，提问作者Marek Kaliszuk