javascript - 手动设置其源时，jQuery 为 img 标签运行 "onerror"函数

Question

我有一个页面正在从 API 加载一些公共(public)摄像头源。每隔几分钟，计时器将每次使用新的附加参数重置 src，以便浏览器更新它而无需重新加载页面。

其中一些图像由于不可用而无法加载，从而返回错误，例如 404。为了解决这个问题，我加入了一个 onerror 函数，如果它没有加载，它会将图像的 src 替换为默认值，一切正常。

<img data-title="' + v.intersection + '" data-img="' + baseFeedURL + v.imageName + '?r=' + Date.now() + '" class="img-fluid loading camera" src="' + baseFeedURL + v.imageName + '?r=' + Date.now() + '" alt="' + v.intersection + ' Camera Down" onerror="this.onerror=null;noImage(this, '+ v.cameraID + ');">;

noImage 函数只返回一个新图像 src。

function noImage(image, cameraID){
    return $(image).attr('src', 'img/img_not_available.gif');
}

不过，我需要做的是能够重新尝试这些图像，看看现在是否有对它们的响应。为此，我将 data-img 添加到每个包含原始图像 url 的图像(因为我们修改了损坏的图像的源)。

然后我创建了一个函数，循环遍历所有具有默认 src 的图像(我正在重新检查的图像)并将它们的 src 替换为存储的原始图像在 data-img 中。

function recheckFeeds(){
    $("img[src$='img/img_not_available.gif']").each(function(){
       $(this).attr('src', $(this).attr('data-img'));
    })
}

这是正确发生的，当我调用该函数时，我看到它在 DOM 中得到更新。

不过，我遇到的问题是 onerror 函数似乎没有再次运行。当我尝试重新设置 src 时，有时 url 仍然不起作用，所以我需要 onerror 再次触发并将其设置回默认图像。

所以，简而言之 - 我需要弄清楚如何在以编程方式设置源代码时在 img 上运行 onerror。

Answer 1

每次图像遇到错误时，您的 onerror 属性表达式的第一个 this.onerror=null 赋值会删除所有进一步的调用，因此在您将其替换为损坏的源后再次检查时它不会触发，使图像空白。

这是我解决这个问题的方法，包括设置重新检查间隔以及重新检查功能在放弃之前应该运行的最长时间(即图像错误不是间歇性的)。

请注意，在图像重新检查中，我仅使用 [data-src] 选择器，并假设只有调用错误处理程序的图像才具有此属性。如果你想确保只有当前损坏图像的图像是目标，我会使用一个类或另一个数据属性的单独标识符(即 data-error=true 或 class=brokensrc)，然后在确认 src 有效后删除所述标识符。

// interval is the amount of time in ms between rechecking the broken images
var interval = 3000;

// maxRetry is the max amount of times the images will be rechecked
var maxRetry = 5;

// thisRetry is a global counter for the image recheck attempts
var thisRetry = 0;

// set the recheck interval and store it in a variable in order to be able to stop it later
var recheckInterval = window.setInterval(recheckImages,interval);

// function to call when image encounters an error
function imageError(e) {
	$(e).attr('data-src',$(e).attr('src'));
	$(e).attr('src','http://placehold.it/200x100/B40000/ffffff?text=404');
}

// function we call at a given iterval
function recheckImages() {
	if(thisRetry < maxRetry) {
		$("[data-src]").each(function( index ) {
			$(this).attr('src',$(this).attr('data-src'));
		});
		thisRetry++;
		console.log("Images rechecked " + thisRetry + " times!");
	} else {
		console.log("Max rechecks reached!");
		clearInterval(recheckInterval);
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <img src="http://placehold.it/200x100?text=OK" onerror="imageError(this)">
	<img src="http://placehold.it/200x100?text=OK" onerror="imageError(this)">
	<img src="http://placehold.it/broken.jpg" onerror="imageError(this)">