Firefox调用AJAX函数中断，地图点图片加载不全问题求助

首先，你的核心问题出在同步AJAX请求阻塞主线程上。同步请求会让JavaScript线程一直等待每个请求完成，才能继续执行后续的marker创建逻辑——Firefox对主线程阻塞的处理机制和Chrome/IE不同，这就导致部分点位的渲染被中断或延迟，出现"加载前几个点就停止"的情况。而且1300个串行的同步请求，必然会带来极高的耗时（Firefox的60秒就是明证）。

下面给出一套高效且兼容的解决方案，完全抛弃同步AJAX的思路：

一、用图片原生事件替代AJAX检查，性能提升显著 #

不需要提前用HEAD请求判断图片是否存在，直接插入图片元素，利用onerror事件处理加载失败的场景——这是最原生、最高效的方式，浏览器会并行加载图片（通常同时处理6-8个请求），不会阻塞主线程，地图的marker渲染也能流畅完成。

1. 解决Chrome"imgError is not defined"报错 #

报错的原因是你的imgError函数不在全局作用域内，浏览器的内联onerror事件无法找到它。把函数挂载到window对象上，确保全局可访问：

// 全局作用域定义错误处理函数
window.imgError = function(image) {
  image.onerror = null; // 防止默认图加载失败时循环触发错误
  image.src = "./photos/no-image.png"; // 替换为默认占位图
  return true;
};

2. 兼容IE的图片移除/替换逻辑 #

如果你的需求是加载失败就移除图片（而非替换默认图），IE不支持element.remove()，改用老的DOM API实现兼容：

window.removeImageOnError = function(image) {
  image.onerror = null;
  // 确保元素有父节点再移除
  if (image.parentNode) {
    image.parentNode.removeChild(image);
  }
};

3. 修改marker的popup构造代码 #

直接插入图片，绑定对应的错误处理函数，完全去掉doesFileExist的调用：

var fiche = "<div class='fiche'>";
ouvrage = L.marker([latitude, longitude], {icon: unvisibleSmallIcon});
var directory = "./photos/" + identite['Cours d\'eau'];
var chemin_photo = directory + "/" + identite['Identification'] + ".JPG";

// 直接插入图片，根据需求选择错误处理方式
// 方式1：替换为默认图
fiche += "<img class='img_logo' onerror='imgError(this)' src='" + chemin_photo + "' alt='' width='80%' height='auto'> <br>";
// 方式2：加载失败则移除图片
// fiche += "<img class='img_logo' onerror='removeImageOnError(this)' src='" + chemin_photo + "' alt='' width='80%' height='auto'> <br>";

ouvrage.bindPopup(fiche);

二、进阶优化：Popup内容懒加载 #

很多用户不会打开所有marker的popup，初始就加载1300张图片会浪费带宽和资源。可以改成点击marker打开popup时才加载对应图片，进一步降低初始加载压力：

ouvrage.bindPopup(function() {
  // 仅当popup打开时才构造内容、加载图片
  var fiche = "<div class='fiche'>";
  var directory = "./photos/" + identite['Cours d\'eau'];
  var chemin_photo = directory + "/" + identite['Identification'] + ".JPG";
  fiche += "<img class='img_logo' onerror='imgError(this)' src='" + chemin_photo + "' alt='' width='80%' height='auto'> <br>";
  return fiche;
});

为什么这套方案能解决你的问题？ #

1. 彻底消除主线程阻塞：图片加载是异步的，marker的创建和地图渲染不会被打断，Firefox也能完整加载所有1300个点位。
2. 性能大幅提升：并行加载图片替代串行同步请求，耗时会从几十秒降到几秒级别。
3. 全浏览器兼容：处理了IE的DOM API兼容问题，也解决了Chrome的函数作用域问题。

内容的提问来源于stack exchange，提问作者J.Delannoy