仅Safari出现ReferenceError: Can't find variable: lozad问题求助

问题场景 #

使用本地存放的lozad库实现图片懒加载，HTML代码如下：

<body>
    <!-- 内容部分（图片元素示例）... -->
    <img class="lozad" data-src="https://unsplash.it/1600/900">

    <!-- 脚本部分... -->  
    <script type="text/javascript" src="static/js/lazyload.js"></script>
    <script>
        const observer = lozad();
        observer.observe();
    </script>
</body>

其中lazyload.js已完整复制CDN上的lozad库代码，但在Safari浏览器中报错ReferenceError: Can't find variable: lozad，改用CDN引入则正常运行，需要保留本地文件的解决方案。

解决方案 #

• 调整脚本模块声明与全局暴露
  从CDN获取的lozad.min.js默认是ES模块格式，Safari对模块的加载需要显式声明。修改脚本引入为模块类型：

  <script type="module" src="static/js/lazyload.js"></script>
  

  同时在lazyload.js的末尾添加一行代码，将lozad挂载到全局window对象，确保后续调用能访问到：

  window.lozad = lozad;
  

• 验证本地文件完整性与编码
  检查lazyload.js是否完整复制了CDN的代码，避免遗漏字符或格式错误。建议重新下载CDN文件并保存为UTF-8编码，防止编码问题导致Safari无法解析。

• 优化脚本加载顺序
  给本地脚本添加defer属性，确保脚本在DOM解析完成后执行，同时保证加载顺序的可靠性：

  <script defer src="static/js/lazyload.js"></script>
  

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