javascript - 检测 JavaScript 中的 404 代码

Question

我需要能够检测 JavaScript 中丢失的图像。

无法使用服务器上的 PHP，因为 href 是由 JavaScript 计算的。文件存在时有效的脚本是:

Data_ID = _DataRow.getDataItem()["Data_ID"];// Picks up the ID of the data
   _HitJPG = document.getElementById("HitJPG");
JPGFileName = _DataRow.getDataItem()["JPGFileName"];
directory = JPGFileName.slice(0, 10);
directory = directory.replace(/-/g, "/");

_HitJPG.innerHTML = "<a href=http://77.88.99.54/data/" + directory + "/" + JPGFileName + " ><h3>JPG File for this Data </h3>" + JPGFileName + "</a>";

在 Div 中设置“InnerHTML”之前如何检测 HTTP 404 代码？

Answer 1

您可以使用onload和onerror事件来检测图像是否可以加载

var Data_ID     = _DataRow.getDataItem()["Data_ID"];
var _HitJPG     = document.getElementById("HitJPG");
var JPGFileName = _SETIDataRow.getDataItem()["JPGFileName"];//"2014-04-29T13-36-27.JPG"
var directory   = JPGFileName.slice(0, 10);

directory = directory.replace(/-/g, "/");

var image = new Image();

image.onerror = function() {
    // fail - image not available
}

image.onload = function() {
    // success - image available

    _HitJPG.innerHTML = "<a href=http://77.88.99.54/data/" + directory + "/" + JPGFileName + " ><h3>JPG File for this Data </h3>" + JPGFileName + "</a>";
}

image.src = "http://77.88.99.54/data/" + directory + "/" + JPGFileName