时间戳

首页 > 解决方案 > 在 JavaScript 检测是否缺少某些图像之前等待所有图像以 HTML 错误加载

javascript - 在 JavaScript 检测是否缺少某些图像之前等待所有图像以 HTML 错误加载

问题描述

我是 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 控制台返回Failed to load resource: net::ERR_FILE_NOT_FOUND. 但是，无论如何，我通过脚本创建的段落始终显示“一切运行顺利”的消息。

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

标签： javascriptjqueryhtml

解决方案

该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>

推荐阅读