AJAX加载Bootstrap模态框图片时出现pagespeed未定义错误，求解决

错误原因 #

这个错误是因为你的服务器启用了PageSpeed优化模块，它会自动给图片标签添加onload="pagespeed.xxx()"这类代码，但你的页面并没有加载PageSpeed的客户端脚本，导致触发图片onload事件时找不到pagespeed变量。

解决方法 #

方法一：前端快速修复 #

在AJAX加载完成并插入内容后，遍历所有图片，移除自动生成的onload事件：

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
    const modalImage = document.getElementById("modalImage");
    modalImage.innerHTML = this.responseText;
    // 清理所有图片的onload事件
    const images = modalImage.querySelectorAll('img');
    images.forEach(img => {
        img.removeAttribute('onload');
        // 若需要保留自定义onload逻辑，可替换为空函数：img.onload = () => {};
    });
}
xmlhttp.open("GET", "include/image.php?id=" + id);
xmlhttp.send();

方法二：后端禁用PageSpeed相关优化 #

如果你有权限配置服务器：

• Apache服务器：修改配置文件，针对图片接口禁用PageSpeed

  <Location /include/image.php>
      ModPagespeed off
  </Location>
  

• Nginx服务器：在对应location块中添加禁用规则

  location /include/image.php {
      pagespeed off;
  }
  

也可以精准禁用触发问题的PageSpeed过滤器，比如insert_image_dimensions，避免影响其他优化效果。

方法三：加载PageSpeed客户端脚本（不推荐） #

若必须保留PageSpeed优化，可在页面头部引入官方脚本，但会增加页面加载负担：

<script src="//ajax.googleapis.com/ajax/libs/pagespeed/1.0/pagespeed.js"></script>

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