jQuery懒加载图片被慢速异步外部脚本阻塞，如何解决？

你遇到的问题核心是当前使用的jQuery懒加载脚本，默认绑定了window.load事件才启动初始化。load事件的触发规则本身就是等待页面所有资源（包括异步加载的第三方脚本、图片、样式表等）全部加载完成后才执行，和脚本是否设置async属性无关，所以才会出现第三方脚本加载慢拖慢懒加载启动的情况。

1. 调整懒加载的触发时机 #

直接修改懒加载的绑定事件，从window.load改为DOMContentLoaded，后者在页面DOM结构解析完成后就会触发，不需要等待任何外部资源加载，能大幅提前懒加载的启动时间。
代码修改示例：

// 原有逻辑（绑定load事件，需等所有资源加载完）
$(window).on('load', function () {
  $('img.lazy').lazyload();
});

// 修改后的逻辑（DOM解析完成就初始化）
$(document).on('DOMContentLoaded', function () {
  $('img.lazy').lazyload();
});

如果懒加载脚本支持直接调用，甚至可以把初始化代码放在</body>标签之前执行，只要对应懒加载图片的DOM已经渲染就能正常工作，不需要绑定任何事件。

2. 替换为原生浏览器懒加载 #

当前所有主流现代浏览器都原生支持图片懒加载能力，不需要依赖任何jQuery脚本，完全不会被第三方脚本的加载进度影响。只需要给需要懒加载的图片加上loading="lazy"属性即可，浏览器会自动根据视口位置控制图片加载时机，性能比第三方JS懒加载方案高30%以上。
代码示例：

<!-- 原有懒加载写法 -->
<img class="lazy" data-src="产品图片地址" alt="产品名称">

<!-- 原生懒加载写法 -->
<img src="产品图片地址" loading="lazy" alt="产品名称">

3. 降级第三方脚本的加载优先级 #

如果一定要保留原有懒加载的load事件绑定逻辑，可以把第三方统计脚本的加载逻辑放到浏览器空闲时再执行，避免它们拖慢load事件的触发时间。
代码示例：

// DOM加载完成后，浏览器空闲时再加载第三方统计脚本
window.addEventListener('DOMContentLoaded', function () {
  const loadThirdScripts = () => {
    // 此处写入GA、FB Pixel、Google转化跟踪的脚本加载逻辑
  };
  if ('requestIdleCallback' in window) {
    requestIdleCallback(loadThirdScripts);
  } else {
    // 兼容旧浏览器，延迟1秒加载第三方脚本
    setTimeout(loadThirdScripts, 1000);
  }
});

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