javascripthtmlonerror

onerror javascript loads just once?


I've been trying to figure out the way for loading screen on/off as I choose (not by automatical event). so I came up with this solution:

css:

#loading {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    background-color: rgba(192, 192, 192, 0.5);
    background-image: url("https://i.sstatic.net/MnyxU.gif");
    background-repeat: no-repeat;
    background-position: center;
}

javascript:

function loading(action) {
    console.log(action);
    document.getElementById('loading').style.display = action ? 'block' : 'none';
}

html:

<div id=loading></div>
<img onerror="loading(true)">
// do whatever i need, which takes several seconds to load
<img onerror="loading(false)">

the loading screen comes on as suppose to, with no problem whatsoever, however there are two things which are not clear to me...

  1. the console.log(action) does not work... it just won't print anything to console whatsoever
  2. second image won't turn off the loading screen... it just stays on all the time

what do I do wrong here?


Solution

  • According to @Aioros answer, it was partialy correct... after adding src to both tags, then it tries to trigger the javascript function, however i was gettig error: loading is not a function which makes no sence to me.

    so i have replaced:

    <img src=blabla onerror="loading(true/false)">
    

    with:

    <script>loading(true/false)</script>
    

    and it works just fine now...