使用 Ajax 加载更多时重新触发 parallax.js答案

【问题标题】：Re-firing parallax.js when using Ajax Load More使用 Ajax 加载更多时重新触发 parallax.js
【发布时间】：2019-12-28 02:04:24
【问题描述】：

我正在尝试将 Parallax.js (jQuery) 和 Ajax Load More (WordPress 插件) 合并到同一页面。当加载更多改变页面的长度时，视差图像应该重新定位自己与其他所有东西，但它们没有，所以我留下了图像应该存在的空白空间。

可以看到问题here – 向下滚动到“过去的事件”。

我意识到在调整页面大小时需要重新触发视差（根据this thread），但到目前为止我还没有编写代码来实现这一点。部分问题可能是我使用的是Ajax Load More WordPress plugin，因此对代码的访问权限与视差效果不同（我不想自己编辑插件文件）。

我正在加载主题文件中的脚本如下：

<script src="js/jquery-3.3.1.min.js"></script> <script src="js/jquery.parallax.min.js"></script>

并按如下方式调用图像：

<div class="parallax-img" data-parallax="scroll" data-src="<?php the_field('page_break_1'); ?>" data-bleed="50" data-midnight="mh-clear"></div>

Load More 功能的中继器是简单的 php，如果有帮助，我可以分享它，但它似乎与此功能无关——我不确定插件在代码方面做了什么。

我希望绝对定位的元素（视差滚动图像）在页面变长时重新绘制它们的位置。请问如何编写函数来实现这一点？

【问题讨论】：

【解决方案1】：

Ajax Load More 具有callbacks functions，在您可以用于此目的的某些事件之后调度。

【讨论】：

谢谢@Darren。我不清楚如何实现这一点——我尝试添加window.almComplete = function(alm){ $(window).trigger('resize').trigger('scroll'); }; 和window.almComplete = function(alm){ jQuery(window).trigger('resize').trigger('scroll'); };，但我没有看到任何变化。我应该如何实施？
您可以在自定义 JS 文件中或在页面本身上实现。我建议使用 console.log 测试该功能
在页面本身（页脚）中是我这样做的地方。 console.log 按预期显示，但仍未看到该图片移动？这就是我正在运行的 - 也许你可以看到我哪里出错了？：<script> window.almComplete = function(alm){ jQuery(window).trigger('resize').trigger('scroll'); console.log('#almComplete should have fired'); }; </script>