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...
what do I do wrong here?
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...