image error load placeholder image issue on mobile safari/chrome

Question

I am using the following script to load a placeholder image, if an image src png is not available/error's:

<script type="text/javascript">
jQuery("img").error(function () {
    jQuery(this).unbind("error").attr("src", "/images/people_placeholder.png");
});
</script>

I am loading the above script just before the closing </body> tag.

It works fine on Chrome desktop & shows the placeholder image.

It doesn't work on Safari Desktop or on Mobile phone in Safari/Chrome

Any idea's?

Place it within the `
` element so that the handler can be attached before any images attempt to load. — Cue, Jan 08 '15 at 10:01
@Cue But then `jQuery("img")` returns empty object and as `onerror` doesn't bubble, you can delegate it. So OP needs to capture it instead or maybe check for all images specific property — A. Wolff, Jan 08 '15 at 10:02
@A.Wolff yes that's correct, sorry I overlooked the delegation. With jQuery you can do `$(document).on('error', 'img', function () {});` — Cue, Jan 08 '15 at 10:05
@Cue No, you cannot delegate `onerror` event **EDIT:** Oops sorry i see in my previous comment, it should be ***cannot delegate*** not ***can delegate*** — A. Wolff, Jan 08 '15 at 10:11

A. Wolff · Accepted Answer · 2015-01-08T10:13:47.230

5

It could be because handler not called if onerror event already fired, you could try instead to capture onerror event, place this script just before </head> tag:

document.addEventListener('error', function (event) {
     var elm = event.target;
     if (elm.tagName == 'IMG') {
         elm.src = "/images/people_placeholder.png";
     }
 }, true ); // true to capture event

Or try checking for specific properties, you could use just before </body> tag:

jQuery("img").one('error', function () {
    jQuery(this).attr("src", "/images/people_placeholder.png"); //.unbind("error") is useless here
}).each(function () {
    if (this.complete && !this.naturalHeight && !this.naturalWidth) {
        $(this).triggerHandler('error');
    }
});

edited Jan 08 '15 at 10:13

answered Jan 08 '15 at 10:00

A. Wolff

74,033
9
94
155

'jQuery("img").one' i thing this is 'jQuery("img").on' – Arunkumar Jan 08 '15 at 10:22
@Neophyte No using `one()` to avoid (for any reason as op was doing) to unbind the onerror event: http://api.jquery.com/one/ – A. Wolff Jan 08 '15 at 10:23

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

Try This one

I found this Here Link

function imgError(image) {
image.onerror = "";
image.src = "/images/people_placeholder.gif";
return true;
}

HTML:

<img src="image.png" onerror="imgError(this);"/>

edited May 23 '17 at 12:07

Community

1
1

answered Jan 08 '15 at 10:02

Arunkumar

5,150
4
28
40

this is fine, but requires the onerror="imgError(this);" added to each img tag – user3544484 Jan 08 '15 at 10:18

score 0 · Answer 3 · answered May 31 '21 at 07:27

0

<img src="URL_OF_IMAGE" alt="image info" onerror="this.src='DEFAULT_IMG_URL'"/>

check docs

or create Global Function to solve this issue

answered May 31 '21 at 07:27

Praveen Patel

199
1
8

image error load placeholder image issue on mobile safari/chrome

3 Answers3