检测图像无法在Javascript中加载的情况

有没有一种方法来确定图像path是否会导致实际的图像，也就是说，检测图像无法在Javascript中加载时。

对于Web应用程序，我parsingXML文件，并从图像path列表dynamic创buildHTML图像。 某些图像path可能不再存在于服务器上，因此我想通过检测哪些图像无法加载并删除该HTML img元素来优雅地失败。

注意JQuery解决scheme不能被使用（老板不想使用JQuery，是的，我知道不让我开始）。 我知道在JQuery中的一种方式来检测图像何时加载，而不是它是否失败。

我的代码来创buildimg元素，但我如何检测imgpath导致加载失败的图像？ 

var imgObj = new Image(); // document.createElement("img"); imgObj.src = src;

你可以尝试下面的代码。 虽然我不能保证浏览器的兼容性，所以你必须testing一下。 

 function testImage(URL) { var tester=new Image(); tester.onload=imageFound; tester.onerror=imageNotFound; tester.src=URL; } function imageFound() { alert('That image is found and loaded'); } function imageNotFound() { alert('That image was not found.'); } testImage("http://foo.com/bar.jpg");

我对jQuery耐心的老板表示同情！

答案很好，但它引入了一个问题。 无论何时直接分配onload或onerror ，它都可能取代之前分配的callback。 这就是为什么有一个很好的方法，就像它们在MDN 上说的那样， “在指定的EventTarget上注册指定的监听器” 。 您可以在同一个事件中根据需要注册许多听众。

让我稍微改写一下答案。 

 function testImage(url) { var tester = new Image(); tester.addEventListener('load', imageFound); tester.addEventListener('error', imageNotFound); tester.src = url; } function imageFound() { alert('That image is found and loaded'); } function imageNotFound() { alert('That image was not found.'); } testImage("http://foo.com/bar.jpg");

由于外部资源加载过程是asynchronous的，因此使用带有承诺的现代JavaScript会更好，如下所示。 

 function testImage(url) { // Define the promise const imgPromise = new Promise(function imgPromise(resolve, reject) { // Create the image const imgElement = new Image(); // When image is loaded, resolve the promise imgElement.addEventListener('load', function imgOnLoad() { resolve(this); }); // When there's an error during load, reject the promise imgElement.addEventListener('error', function imgOnError() { reject(); }) // Assign URL imgElement.src = url; }); return imgPromise; } testImage("http://foo.com/bar.jpg").then( function fulfilled(img) { console.log('That image is found and loaded', img); }, function rejected() { console.log('That image was not found'); } );

这是我为另一个答案写的函数： Javascript图像Urlvalidation 。 我不知道它是否正是你所需要的，但它使用了各种技术，包括onload ， onerror ， onabort和一般的超时处理程序。

由于图像加载是asynchronous的，因此您可以使用图像调用此函数，稍后再调用您的callback函数的结果。 

 /** * Tests image load. * @param {String} url * @returns {Promise} */ function testImageUrl(url) { return new Promise(function(resolve, reject) { var image = new Image(); image.addEventListener('load', resolve); image.addEventListener('error', reject); image.src = url; }); } return testImageUrl(imageUrl).then(function imageLoaded(e) { return imageUrl; }) .catch(function imageFailed(e) { return defaultImageUrl; });

就像下面一样： 

 var img = new Image(); img.src = imgUrl; if (!img.complete) { //has picture } else //not{ }
Interesting Posts