CODEWITHSUNDEEP
javascriptjqueryhtml
souza
souza

Reputation: 1438

Waiting for all images to load in HTML error before JavaScript detects if some of them is missing

I am pretty new at JavaScript, but was asked to create an script capable of monitoring the state of some images in a webpage. The idea of this code is to, in the HTML page, create a paragraph which content changes if some specific errors are detect. One of the errors it should detect is in case an image is missing. Below, I have first the HTML document, followed by the 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>

And the JS file:

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

    }

}

The image puppay2.jpg doesn't actually exists, making the web console return Failed to load resource: net::ERR_FILE_NOT_FOUND. But the paragraph I created through the script, though, keeps showing the message "Everything is running smoothly", no matter what.

Can anyone tell what I'm doing wrong over here?

Upvotes: 0

Views: 75

Answers (1)

Andrew L
Andrew L

Reputation: 5486

The img tag has an onerror event, but it seems like the img would fail and hit that event before you attach the event listener. So myFunction() is never called.

What you can do is add onerror to your img tags and have it point to your myFunction. I cleaned up that function a bit, for example, used jQuery instead to be consistent. And show() the p tag after adding an error.

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>

Upvotes: 2

Related Questions