等待所有图像加载到HTML错误，然后JavaScript检测是否缺少其中一些图像_Javascript_Jquery_Html

等待所有图像加载到HTML错误，然后JavaScript检测是否缺少其中一些图像

javascript jquery html

等待所有图像加载到HTML错误，然后JavaScript检测是否缺少其中一些图像,javascript,jquery,html,Javascript,Jquery,Html,我对JavaScript相当陌生，但被要求创建一个能够监控网页中某些图像状态的脚本。这段代码的思想是，在HTML页面中，创建一个段落，如果检测到某些特定错误，该段落的内容会发生变化。它应该检测到的错误之一是图像丢失的情况。下面，首先是HTML文档，然后是JavaScript： <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquer

我对JavaScript相当陌生，但被要求创建一个能够监控网页中某些图像状态的脚本。这段代码的思想是，在HTML页面中，创建一个段落，如果检测到某些特定错误，该段落的内容会发生变化。它应该检测到的错误之一是图像丢失的情况。下面，首先是HTML文档，然后是JavaScript：

<!DOCTYPE html>
<html>
    <head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>

    </head>
    <body>

        <h1><b>A small boy</b></h1>

        <img id="puppyimage" src="puppy.jpg" width="600" height="399">

        <img id="puppy2image" src="puppay2.jpg" width="600" height="399" >

        <p>That does not want to be disconnected.</p>

        <!-- This script is just an error searcher. -->
        <script src="C:\\Users\\dev2\\Desktop\\errodetector.js"></script>

        <!-- And now it is done. -->

    </body>

</html>


小男孩
它不希望断开连接

和JS文件：

var error_status = document.createElement("p");
var status_text = document.createTextNode("Everything is running smoothly");
error_status.appendChild(status_text);
error_status.style.display = "none";
error_status.id = "message";
document.body.appendChild(error_status);

function myFunction(){

    if (document.getElementById("message").innerHTML == "Everything is running smoothly"){

        document.getElementById("message").innerHTML = "Error " + "detected: "  + "Media error";

    } else {

        document.getElementById("message").innerHTML += "\nError " + "detected: "  + "Media error";

    }

}


$(window).on('load', function() {

    var all_images = document.getElementsByTagName("img");

    for (var cont = 0; cont < all_images.length ; cont++){

        all_images[cont].addEventListener("error", myFunction.bind());

    }

});

window.onerror = function(errorMsg){

    if (document.getElementById("message").innerHTML == "Everything is running smoothly"){

        document.getElementById("message").innerHTML = "Error " + "detected: "  + errorMsg +"\n";

    } else {

        document.getElementById("message").innerHTML += "\nError " + "detected: "  + errorMsg +"\n";

    }

}

var error_status=document.createElement（“p”）；
var status_text=document.createTextNode（“一切运行顺利”）；
错误\状态。追加子项（状态\文本）；
错误\u status.style.display=“无”；
错误\u status.id=“消息”；
document.body.appendChild（错误状态）；
函数myFunction（）{
if（document.getElementById（“message”）.innerHTML==“一切都在顺利运行”）{
document.getElementById（“message”）.innerHTML=“Error”+”检测到：“+”媒体错误”；
}否则{
document.getElementById（“消息”）.innerHTML+=“\n检测到错误”+”：“+”媒体错误；
}
}
$（窗口）.on（'load'，function（）{
var all_images=document.getElementsByTagName（“img”）；
对于（var cont=0；cont


映像puppay2.jpg实际上不存在，导致web控制台返回无法加载资源：net:：ERR\u FILE\u NOT\u FOUND
。但是，我通过脚本创建的段落始终显示出“无论发生什么事情，一切都在顺利运行”的信息
有人能告诉我这里做错了什么吗？
img

标记有一个事件，但似乎在连接事件侦听器之前，img会失败并命中该事件。因此，永远不会调用myFunction（）

您可以做的是将

onerror

添加到您的

img

标签中，并使其指向您的myFunction。我稍微整理了一下这个函数，例如，使用jQuery来保持一致性。和添加错误后的

show（）

p标记

var error_status=document.createElement（“p”）；
var status_text=document.createTextNode（“一切运行顺利”）；
错误\状态。追加子项（状态\文本）；
错误\u status.style.display=“无”；
错误\u status.id=“消息”；
document.body.appendChild（错误状态）；
函数myFunction（）{
var$msgDiv=$（“#消息”）；
var isRunningSmoothly=$msgDiv.text（）=“一切都在顺利运行”；
如果（正在顺利运行）{
$msgDiv.text（“检测到错误“+”：“+”媒体错误”）；
}否则{
$msgDiv.text（$msgDiv.text（）+“\n检测到错误“+”：“+”媒体错误”）；
}
$msgDiv.show（）；
}


小男孩
不希望断开连接。

img标记有一个事件，但在连接事件侦听器之前，img似乎会失败并触发该事件。因此，永远不会调用myFunction（）

您可以做的是将

onerror

添加到您的

img

标签中，并使其指向您的myFunction。我稍微整理了一下这个函数，例如，使用jQuery来保持一致性。和添加错误后的

show（）

p标记

var error_status=document.createElement（“p”）；
var status_text=document.createTextNode（“一切运行顺利”）；
错误\状态。追加子项（状态\文本）；
错误\u status.style.display=“无”；
错误\u status.id=“消息”；
document.body.appendChild（错误状态）；
函数myFunction（）{
var$msgDiv=$（“#消息”）；
var isRunningSmoothly=$msgDiv.text（）=“一切都在顺利运行”；
如果（正在顺利运行）{
$msgDiv.text（“检测到错误“+”：“+”媒体错误”）；
}否则{
$msgDiv.text（$msgDiv.text（）+“\n检测到错误“+”：“+”媒体错误”）；
}
$msgDiv.show（）；
}


小男孩
不希望断开的连接。