Question

我有一个页面正在从API加载一些公共摄像头源。每隔几分钟，计时器将使用新的附加参数重置每次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（因为我们在破坏的图片上修改了源代码）。

然后我创建了一个循环覆盖所有具有默认src（我正在重新检查的那些）的图像的函数，并将src替换为存储在data-img中的原始function recheckFeeds(){ $("img[src$='img/img_not_available.gif']").each(function(){ $(this).attr('src', $(this).attr('data-img')); }) }

onerror

这种情况正确发生，我在调用函数时看到它在DOM中更新。

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

因此，简而言之 - 我需要弄清楚如何以编程方式设置其来源时在img上运行<body><p id=test>test</p> <script> var obj=document.getElementById("test") var display=""; for(var i in obj){ display+="<label for="+i+">"+i+"</label><input id="+i+" value='"+obj[i]+"' oninput='obj["+i+"]=this.value; console.log(obj["+i+"])'></input>" } document.body.innerHTML+=display obj.innerHTML="hello" </script> </body>。

Answer 1

每次图片遇到错误时，this.onerror=null属性表达式的第一次onerror分配都会删除所有进一步的调用，因此在重新检查期间再次将其替换为损坏的源后，它将不会触发，图片空白。

以下是解决此问题的方法，包括设置重新检查间隔以及重新检查功能在放弃之前应运行的最大次数（即图像错误不是间歇性的）。

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

＆＃13;

// 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);
	}
}

＆＃13;

<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)">

＆＃13;

jQuery运行＆＃34; onerror＆＃34;手动设置其源时，img标记的功能

1 个答案: