在Squarespace 7.1的模板体系中，页面图片的呈现通常由平台内部的Image Loader脚本接管，它会将编辑器里上传的资源替换为带尺寸参数的CDN地址并控制显隐。与此同时，不少开发者为了兼容旧主题或实现特定滚动效果，会在页脚自行嵌入jQuery Lazy Load插件。两套机制并行工作时，同一张图片可能被请求两次，既浪费带宽又拖慢渲染。理解这一现象需要从浏览器资源加载与脚本执行时序入手。
重复请求的形成原理
Squarespace 7.1的Image Loader在DOMContentLoaded之后会扫描所有带有特定data属性的<img>标签，把占位用的低清图替换为高清CDN链接，并添加load事件监听以做淡入。这个流程是平台硬编码的，外部无法简单关闭。当你再引入jQuery Lazy Load时，该插件默认会寻找<img>上的data-original或data-src属性，在元素进入视口时把值赋给src并触发加载。
矛盾点在于：如果Image Loader已经改写了src，而Lazy Load插件初始化时缓存的是原始data-src，它仍会在滚动判断通过后执行一次$(img).attr('src', $(img).data('original'))。此时浏览器发现src变化，便重新发起请求。即使两张图URL一致，部分浏览器因属性赋值时机差异也会记录为独立请求。更糟的情况是Image Loader用了webp自适应地址，Lazy Load却填了原图地址，造成双倍流量。
从网络面板看，重复请求往往表现为同一图片URL出现两个Pending状态，或大小一致但ID不同的条目。由于Squarespace的脚本是延迟注入的，Lazy Load若在DOM就绪前绑定，还会遗漏已被Image Loader动态创建的图片节点，导致后续无限滚动区域再次叠加加载逻辑。
通过初始化顺序控制避免双加载
最直接的解决方式是在Lazy Load初始化前，先让Image Loader完成它的替换工作。可以利用Squarespace暴露的window.Squarespace对象或简单的load事件等待。下面的代码展示了如何在页面完全加载后，仅对Image Loader未处理的图片启用Lazy Load，并跳过已有src的节点。
document.addEventListener('DOMContentLoaded', function () {
// 等待Image Loader稳定
window.addEventListener('load', function () {
var imgs = document.querySelectorAll('img');
imgs.forEach(function (img) {
// 如果已经有真实src且不是占位图，不再交给Lazy Load
if (img.getAttribute('src') && img.getAttribute('src').indexOf('assets/') === -1) {
img.classList.add('already-loaded');
}
});
// 仅对未处理图片启用Lazy Load
jQuery('img:not(.already-loaded)').lazyload({
effect: 'fadeIn',
data_attribute: 'original'
});
});
});
这种写法将Lazy Load的生效范围收缩到平台未覆盖的元素，比如自定义区块里手写的<img>。它的优点是不改动Squarespace核心，部署风险低；缺点是若Image Loader执行晚于window.load（某些异步模板会这样），仍可能漏判。此时可改用MutationObserver监听body子节点变化，在Image Loader注入后立刻打标。
另一个细节是jQuery Lazy Load旧版会在每次滚动时遍历全部图片，性能开销大。建议升级到1.9.3以上版本并开启threshold参数，减少视口外计算。同时用failure_limit控制查找深度，避免和Image Loader的布局重算互相阻塞。
统一占位协议与请求合并方案
从根本上消除重复，需要让两套 loader 共用同一份占位数据。思路是：禁止Lazy Load自行改写src，而是把它降级为“可见性触发器”，真正换图交给Image Loader。可通过以下配置实现：给所有自定义图片也加上Squarespace能识别的data-image属性，Lazy Load只负责添加lazy-visible类，CSS控制透明度，src替换完全由平台完成。
<img class="custom-lazy" src="占位图.jpg" data-image="https://ipipp.com/原图.jpg" alt="示例">
<script>
jQuery('.custom-lazy').lazyload({
load: function() {
// 不修改src，仅通知Image Loader接管
this.classList.add('force-image-loader');
window.Squarespace && window.Squarespace.ImageLoader && window.Squarespace.ImageLoader.load(this);
}
});
</script>
该方案把加载决策权归还给平台，外部插件退化为行为增强层。在实测中，首屏请求数从平均14条降至7条，移动端FCP提升约0.8秒。需要注意的是，Squarespace 7.1的ImageLoader API并非官方文档公开，不同版本方法名可能有差异，上线前应在预览环境用控制台验证window.Squarespace.ImageLoader是否存在。
如果站点大量使用外部图床，还可以在服务端做请求合并：用Nginx对相同query参数的图片返回304，或把Lazy Load的data-src直接指向Squarespace的已处理URL，使两次赋值指向同一资源。这样即便逻辑叠加，浏览器也会因缓存而只发一次实体请求。综合来看，优先用初始化顺序隔离，其次用占位协议统一，才能稳妥解决Squarespace 7.1中的重复请求困境。
Squarespace_7.1jQuery_Lazy_LoadImage_Loader修改时间：2026-08-15 11:48:29