Question

我有一个点数据库（1300分），我在地图上绘制它们。对于大多数这些点，如果图像存在，我想在弹出窗口中绘制图像。因此，使用AJAX，我检查路径是否存在，如果是，我绘制图像，如果不是，我什么都不做。

以下是代码：

function doesFileExist(urlToFile) {
  var value;
    var xhr = new XMLHttpRequest();
    xhr.open('HEAD', urlToFile,false); //requete synchrone : nécessaire pour l'affichage d'image mais long
    xhr.onreadystatechange = function() {
    if (this.readyState == this.DONE) {
      if (this.status == "404") {
          value = false;
      } else {
          value = true;
      }
    };
    }
    xhr.send();
    return value;
}

主要问题是Firefox大多数时间只绘制几个点。 IE和Chrome没问题。

我想知道我是否要求过多的资源，但在这种情况下甚至没有努力绘制积分。它只绘制了第一个并停止加载。（所以它要么长又完整，要么快又不完整。）

有人知道如何避免仅绘制部分积分吗？

解决方案可能是使用比我的AJAX功能更有效的方式，如果有人知道，因为这个路径检查需要时间加载（使用Chrome约17秒，使用Internet Explorer约15秒，使用Firefox约60秒）

Here is website,你可以自己看。

我的javascript调用函数（div＆＃39; fiche＆＃39;对应弹出窗口）

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";
      if (doesFileExist(chemin_photo)){
        fiche += "<img class='img_logo' src='"+chemin_photo+"' alt='' width='80%' heigth='auto'> <br>";}

    ouvrage.bindPopup(fiche);

修改感谢评论，我将代码更改为：

<img class='img_logo' onerror='this.remove()' src='"+chemin_photo+"' alt='' width='80%' heigth='auto'> <br>"

但Internet Explorer无法理解删除功能。

然后我尝试用另一张图片替换，但是image.onerror =＆＃34;＆＃34;不适用于Chrome。

<img class='img_logo' onerror='imgError(this)' src='"+chemin_photo+"' alt='' width='80%' heigth='auto'> <br>"
function imgError(image) {
    image.onerror = "";
    image.src = "./photos/no-image.png";
    return true;
  }

但Chrome表示＆＃34; imgError未在HTMLImageElement.onerror中定义＆＃34;

Answer 1

使用async false是一种可怕的做法，因为它完全阻止了页面中的所有内容

为什么不在图像上使用错误处理程序并在发生错误时删除

<img src="..." onerror="this.remove()">

Firefox停止调用AJAX函数

1 个答案: