javascript - How to replace nonexistent images with a placeholder in asynchronous loading from database - Stack Overflow

admin管理员组

文章数量:1025486

I have a database with images that i need to load on-the-fly per user's request. The images would go as background images of separate s in an enpassing div container... something like image scroller.

The database is currently a local database but this is not my issue.

the issue is that the database may not have all the images that i have requested...and i may get one or more images that are non-existent... and since things are asynchronous on the database front and the loading image front as well, i am not sure how to go about replacing a non-existent image with a standard placeholder image. I cannot do it on the fly in a loop since that executes way before loading even happens. I tried using .Load and .error, but i am not sure how i can do that on a background image.

Is there a standard and simple way to deal with this.. preferably without plugins since i have many as is...

I have a database with images that i need to load on-the-fly per user's request. The images would go as background images of separate s in an enpassing div container... something like image scroller.

The database is currently a local database but this is not my issue.

the issue is that the database may not have all the images that i have requested...and i may get one or more images that are non-existent... and since things are asynchronous on the database front and the loading image front as well, i am not sure how to go about replacing a non-existent image with a standard placeholder image. I cannot do it on the fly in a loop since that executes way before loading even happens. I tried using .Load and .error, but i am not sure how i can do that on a background image.

Is there a standard and simple way to deal with this.. preferably without plugins since i have many as is...

• javascript
• jquery
• image
• broken-image

Share Improve this question Follow asked Apr 22, 2012 at 6:48 fawzi_masrifawzi_masri 11322 silver badges77 bronze badges 4

• 1 Can we see the code that propagates the images, please? – Ohgodwhy Commented Apr 22, 2012 at 6:55
• You would do this server side, depending on the language you're using. – Control Freak Commented Apr 22, 2012 at 7:01
• I am now using an img within my div so i can use something like this on the src.: onerror(this.src="myplaceholder.jpg"); i am not sure how you can check if a background image has loaded, and that is why i doing it this way now. – fawzi_masri Commented Apr 23, 2012 at 5:17
• I am now using an img within my div so i can use something like this on the src.: onerror(this.src="myplaceholder.jpg"); i am not sure how you can check if a background image has loaded, and that is why i doing it this way now. Is there a way to put onerror on a background image? – fawzi_masri Commented Apr 23, 2012 at 5:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

It seems i could not get away from having to create another DOM elem. Here is what i am now using:

<div style="background:url(providerSrc)">
<img
     style="display:none" 
       src="providerSrc"
   onerror="this.parentNode.style.backgroundImage='url(fallbackSrc)'"  
   />
</div>

This is taken from: http://www.daveoncode./2010/08/20/image-background-fallback-img-tag-error-handlers/

If you know of 'better' solution please reply

What if you put the placeholder as background image behind the original image? If the image exists, it will cover the placeholder. If not, then nothing covers the placeholder and it will be visible.

I have a database with images that i need to load on-the-fly per user's request. The images would go as background images of separate s in an enpassing div container... something like image scroller.

The database is currently a local database but this is not my issue.

the issue is that the database may not have all the images that i have requested...and i may get one or more images that are non-existent... and since things are asynchronous on the database front and the loading image front as well, i am not sure how to go about replacing a non-existent image with a standard placeholder image. I cannot do it on the fly in a loop since that executes way before loading even happens. I tried using .Load and .error, but i am not sure how i can do that on a background image.

Is there a standard and simple way to deal with this.. preferably without plugins since i have many as is...

I have a database with images that i need to load on-the-fly per user's request. The images would go as background images of separate s in an enpassing div container... something like image scroller.

The database is currently a local database but this is not my issue.

the issue is that the database may not have all the images that i have requested...and i may get one or more images that are non-existent... and since things are asynchronous on the database front and the loading image front as well, i am not sure how to go about replacing a non-existent image with a standard placeholder image. I cannot do it on the fly in a loop since that executes way before loading even happens. I tried using .Load and .error, but i am not sure how i can do that on a background image.

Is there a standard and simple way to deal with this.. preferably without plugins since i have many as is...

• javascript
• jquery
• image
• broken-image

Share Improve this question Follow asked Apr 22, 2012 at 6:48 fawzi_masrifawzi_masri 11322 silver badges77 bronze badges 4

• 1 Can we see the code that propagates the images, please? – Ohgodwhy Commented Apr 22, 2012 at 6:55
• You would do this server side, depending on the language you're using. – Control Freak Commented Apr 22, 2012 at 7:01
• I am now using an img within my div so i can use something like this on the src.: onerror(this.src="myplaceholder.jpg"); i am not sure how you can check if a background image has loaded, and that is why i doing it this way now. – fawzi_masri Commented Apr 23, 2012 at 5:17
• I am now using an img within my div so i can use something like this on the src.: onerror(this.src="myplaceholder.jpg"); i am not sure how you can check if a background image has loaded, and that is why i doing it this way now. Is there a way to put onerror on a background image? – fawzi_masri Commented Apr 23, 2012 at 5:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

It seems i could not get away from having to create another DOM elem. Here is what i am now using:

<div style="background:url(providerSrc)">
<img
     style="display:none" 
       src="providerSrc"
   onerror="this.parentNode.style.backgroundImage='url(fallbackSrc)'"  
   />
</div>

This is taken from: http://www.daveoncode./2010/08/20/image-background-fallback-img-tag-error-handlers/

If you know of 'better' solution please reply

What if you put the placeholder as background image behind the original image? If the image exists, it will cover the placeholder. If not, then nothing covers the placeholder and it will be visible.

本文标签：