PHP实现QR码下载功能后preloader预加载器持续加载问题排查

开发者阿泽

2026-9-27

问题原因

你绑定的页面跳转逻辑将下载链接判定为普通页面跳转：pageTransition的conditions校验规则没有排除下载链接，点击下载按钮时，脚本认为你要跳转页面，执行onTransitionStart逻辑移除了预加载器的loaded类，触发预加载器显示。
下载请求不会触发页面跳转：你后端返回的响应头带Content-disposition: attachment，只会触发浏览器下载行为，不会刷新或跳转当前页面，因此跳转逻辑的onReady回调永远不会执行，无法给预加载器加回loaded类，导致预加载器一直处于加载状态。

解决方法

方案1：给下载链接添加排除标识（推荐）

给下载的<a>标签新增自定义属性作为排除标记，示例代码：

<a id="download" href="download_qr_code.php?url=<?=encodeURIComponent($row["QR"])?>" data-preloader-skip="true">
  <i title="Download"  class="fa fa-download fa-4x" aria-hidden="true"></i>
</a>

修改预加载器的conditions判断逻辑，新增对该属性的校验：

conditions: function (event, link) {
  return link && 
  !/(\#|javascript:void\(0\)|callto:|tel:|mailto:|:\/\/)/.test(link) && 
  !event.currentTarget.hasAttribute('data-lightgallery') &&
  !event.currentTarget.hasAttribute('data-preloader-skip'); // 新增排除规则
}

方案2：修改正则规则直接排除下载路径

直接在正则里匹配下载接口的路径，无需修改HTML代码：

conditions: function (event, link) {
  return link && 
  !/(\#|javascript:void\(0\)|callto:|tel:|mailto:|:\/\/|download_qr_code\.php)/.test(link) && 
  !event.currentTarget.hasAttribute('data-lightgallery');
}