Fancybox 4集成静态HTML图库报addEventListener空错误如何解决

数据老陈

2026-10-12

问题原因

你遇到的Cannot read property 'addEventListener' of null报错，是因为你将Fancybox的JS脚本放在了<head>标签内，脚本加载执行时页面DOM还未完成渲染，Fancybox找不到对应带data-fancybox属性的元素，导致初始化失败，点击缩略图就会走默认的跳转逻辑。

修复方案

你可以任选以下一种方案修改：

方案1：调整脚本加载位置（最简单）

保留CSS引用在<head>内，把Fancybox的JS引用移到</body>结束标签之前，保证DOM渲染完成后再加载执行脚本：

<!-- head里只保留CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" />
</head>
<body>
<!-- 你的图库HTML内容 -->

<!-- 把JS放在body末尾 -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>
</body>

方案2：添加DOM加载完成监听后手动初始化

如果必须把JS放在<head>内，就添加DOM加载完成事件，等DOM渲染完成后再手动绑定Fancybox：

<!-- head内的引用 -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" />
<script>
document.addEventListener('DOMContentLoaded', function() {
  Fancybox.bind('[data-fancybox="gallery"]', {
    // 这里可以自定义Fancybox配置，比如动画、按钮等，不需要自定义可以留空
  });
});
</script>