iOS移动端浏览器img标签loading="lazy"致网站崩溃无限重载问题

这是iOS端WebKit内核原生懒加载bug叠加Webflow默认脚本冲突导致的，和你写的代码本身没有关系，触发逻辑拆解得很清楚：

• 苹果在iOS 17.4之后的静默小版本更新里，给WebKit（iOS上所有浏览器都强制使用这个内核，不管是Safari还是第三方的Chrome、Edge）的原生loading="lazy"实现引入了一个未修复的渲染bug：如果懒加载的是SVG格式图片，且元素刚好卡在懒加载判定的视口阈值边界，就会触发判定死循环：内核检测到元素进入视口→开始加载图片→图片加载完成触发页面重排→元素位置出现亚像素级偏移，被判定为离开视口→立刻终止加载、重置元素状态→再次被判定为进入视口重新加载。这个循环运行后短时间会占满渲染进程内存，最终触发WebKit的页面崩溃保护，要么无限重载要么弹出“网页反复出现问题”的提示。
• Webflow默认会给所有站点注入一套基于Intersection Observer实现的JS懒加载脚本，这套逻辑和WebKit原生的loading="lazy"存在状态冲突：两套监听逻辑同时绑定在同一个img标签上，会互相重置对方的加载状态，直接把上述死循环的触发概率从偶发拉到100%必现。这也解释了为什么禁用JS后页面恢复正常——Webflow注入的懒加载脚本不运行，单靠原生bug的触发概率极低，根本不会触发崩溃。
• 你提到两周前功能正常、这段时间没有修改代码，属于非常典型的客户端静默更新导致的故障：iOS的小版本更新、WebKit安全补丁很多都是后台静默自动安装的，你的代码没有变动，但访客手机上的浏览器内核已经被苹果更新为带bug的版本，故障自然会突然出现。
• 控制台无报错、重定向检测结果正常也完全符合这个故障的特征：问题出在渲染进程内核层面的事件循环阻塞，根本不会抛出JS层可捕获的异常，也不存在HTTP请求跳转异常，常规前端排查手段抓不到报错是正常现象。

你已经测试验证过的将loading属性值修改为eager是最直接有效的解法，不想修改属性的话选择以下任意一种方案也能解决问题：

• 给这个SVG图标显式设置固定宽高属性，避免图片加载前后出现重排位移，直接打断死循环的触发条件
• 进入Webflow站点设置，关闭平台自带的图片懒加载功能，避免JS层懒加载逻辑和原生逻辑冲突
• 将SVG资源转为base64格式直接内联到页面中，不走外部资源加载流程，自然不会触发懒加载判定

这个WebKit懒加载bug已经有大量开发者反馈，目前苹果还没有在正式版系统中推送修复，等后续iOS版本更新修复内核问题后，再改回loading="lazy"属性也不会出现异常。

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