如何让BalancedGallery与Museum两款jQuery脚本协同工作

问题根源 #

两款旧脚本的DOM操作时序冲突导致事件绑定失效：

• Museum 在 document.ready 阶段就将事件绑定到初始的 <img> 元素上
• BalancedGallery 在 window.load 阶段会重构 #content 内的DOM结构（比如把原始图片包装进新容器/标签），替换了原本绑定事件的 <img> 元素
• 最终页面显示的图片已不是 Museum 最初绑定事件的元素，点击时无法触发查看器，只能触发图片的默认跳转行为

解决方案 #

调整初始化顺序，确保 Museum 在 BalancedGallery 完成DOM重构后再绑定事件：

修改脚本部分为：

$(window).on('load', function () {
  // 先执行BalancedGallery完成DOM重构
  $("#content").BalancedGallery({});
  // 再初始化Museum，绑定到处理后的图片元素上
  $.museum($('#content img'));
});

补充说明 #

手动在URL后添加 #msm-gallery-2 能正常显示查看器，是因为此时 Museum 会根据锚点直接触发查看器逻辑，不需要依赖点击事件绑定，因此不受DOM结构变化的影响。

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