gpt4 book ai didi

javascript - 在 JavaScript 检测到其中一些图像是否丢失之前,等待所有图像加载为 HTML 错误

转载 作者:行者123 更新时间:2023-12-01 01:34:40 25 4
gpt4 key购买 nike

我对 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";

}

}

图像 puppay2.jpg 实际上并不存在,导致 Web 控制台返回无法加载资源:net::ERR_FILE_NOT_FOUND。但无论如何,我通过脚本创建的段落始终显示“一切运行顺利”的消息。

谁能告诉我我在这里做错了什么吗?

最佳答案

img 标签有一个 onerror事件,但在附加事件监听器之前,img 似乎会失败并触发该事件。所以 myFunction() 永远不会被调用。

您可以做的是将 onerror 添加到您的 img 标记中,并让它指向您的 myFunction。我稍微清理了这个函数,例如,使用 jQuery 来保持一致。添加错误后,show() p 标记。

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() {
var $msgDiv = $("#message");
var isRunningSmoothly = $msgDiv.text() == "Everything is running smoothly";

if (isRunningSmoothly) {
$msgDiv.text("Error " + "detected: " + "Media error");
} else {
$msgDiv.text($msgDiv.text() + "\nError " + "detected: " + "Media error");
}
$msgDiv.show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><b>A small boy</b></h1>

<img id="puppyimage" src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Alessandro_Vittoria_-_Paolo_Veronese.jpg" onerror="myFunction(this)" height="200"/>

<img id="puppy2image" src="puppay2.jpg" onerror="myFunction(this)" height="200"/>

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

关于javascript - 在 JavaScript 检测到其中一些图像是否丢失之前,等待所有图像加载为 HTML 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52933740/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com