Onerror Event Using Background: Url()

onerror event using background: url()

In case myimage.gif isn't transparent, you could use multiple backgrounds:

background: url('myimage.gif'), url('fallback.gif');

This way fallback.gif will only be visible if myimage.gif isn't available.

Note that fallback.gif may be downloaded even if myimage.gif is available.

---

Alternatively, even though not widely supported, CSS Images 3 introduces the image() notation:

background: image('myimage.gif', 'fallback.gif');

Multiple <image-decl>s can be given separated by commas, in
which case the function represents the first image that's not an
invalid image.

Onerror attribute of background image

if you add the second url to background-image attribute, if the first one not loaded then the second one will load.

function getIp() {
  var x = "url('";
  var y = document.getElementById("ip_cam").value;
  var z = "'), url(assets/error3.gif)"; //added here with comma
  var xyz = x + y + z; 
  document.body.style.backgroundImage = xyz;
}

how to use img onError source as div

Content URL is on the CSS side, and will not raise any event to JS side at all. A similar approach with onError can be like this:

<div style="content:url(https://example.com/what.jpg)" alt="No Product Image" >
  <img style="display: none" src="https://example.com/what.jpg" onerror="this.parentElement.style.content = 'url(https://placehold.it/300x300)'">
</div>

But IMO it is weird to do div with content style, why not just use <img> then.

Loading image in the background and testing for onerror event

Solved it like this:

function chkAuth() {
        var date = new Date();
        var currentTime = date.getTime();
        var imgURL = 'small.png' + '?time=' + currentTime;
        var testImg = new Image();
        testImg.onerror = function () {
            alert("Your session has expired!");
            location.reload();
        }
        testImg.onload = function () {
            alert("Your session has extended!");
        }
        testImg.src = imgURL;
    }

The problem was the image object was being stored in the browser cache. By adding the current time to the URL string I am forcing the browser to reload the image. It didn't occur to me that the image would be cached since I was only loading the image object in the background without binding it to the document.

onerror javascript loads just once?

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

---

Related Topics