Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/84.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript jqueryrun";onerror";手动设置img标签源时的img标签功能_Javascript_Jquery - Fatal编程技术网

Javascript jqueryrun";onerror";手动设置img标签源时的img标签功能

Javascript jqueryrun";onerror";手动设置img标签源时的img标签功能,javascript,jquery,Javascript,Jquery,我有一个页面正在加载一些来自API的公共摄像机提要。每隔几分钟,计时器将使用新的附加参数重置每次的src,以便浏览器无需重新加载页面即可进行更新 但其中一些图像由于不可用而无法加载,因此返回错误,如404。为了解决这个问题,我加入了一个onerror函数,它用一个默认的函数替换图像的src,如果它没有加载,一切正常 <img data-title="' + v.intersection + '" data-img="' + baseFeedURL + v.imageName + '?r='

我有一个页面正在加载一些来自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 + ');">;
但我需要做的是能够重新尝试这些图像,看看它们现在是否有响应。为了做好准备,我将
数据img
添加到每个包含原始图像url的图像中(因为我们在损坏的图像上修改了源代码)

然后,我创建了一个函数,该函数在所有具有默认
src
(我正在重新检查的图像)的图像上循环,并用存储在
数据img
中的原始图像替换它们的
src

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

每次图像遇到错误时,第一次
出现错误。onerror=null
分配
onerror
属性表达式将删除所有后续调用,因此,在使用在重新检查时再次断开电源,它将不会触发,留下空白图像

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

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

//interval是重新检查损坏图像之间的时间量,单位为毫秒
var区间=3000;
//maxRetry是重新检查图像的最大次数
var maxRetry=5;
//thisRetry是图像重新检查尝试的全局计数器
var thisRetry=0;
//设置重新检查间隔并将其存储在变量中,以便以后能够停止
var RECHECTINTERVAL=window.setInterval(RECHECTIMAGES,interval);
//当图像遇到错误时调用的函数
函数映像错误(e){
$(e).attr('data-src',$(e).attr('src');
$(e).attr('src','http://placehold.it/200x100/B40000/ffffff?text=404');
}
//我们在给定的iterval上调用的函数
函数名为{
if(thisRetry


您看过吗?长话短说,它似乎是特定于Chrome的,解决方案是
将src属性设置为null,然后将其更改为指定给onerror事件的函数中的新值!这可能是一个过时的答案,无法正常工作。您能确认这在所有浏览器上都会发生吗?我刚刚注意到image元素上onerror内部的
This.onerror=null
部分。你最近加的吗?看起来效果不错!谢谢你在这方面的帮助。我看到了多篇关于设置
null
的帖子,从没想过这会是我可以帮助的问题,我希望我能早点注意到这一点。根据我对原始问题的最后一点评论:“为了避免循环而包含它的建议是错误的,因为它假设您是从OneError处理程序内部调用图像复查函数,而不是从外部设置它”。设置此.onerror=null的唯一方法是,如果在执行onerror处理程序时将其设置为其他值,则不会出现问题,但在这种情况下,这将是无用的。
function recheckFeeds(){
    $("img[src$='img/img_not_available.gif']").each(function(){
       $(this).attr('src', $(this).attr('data-img'));
    })
}