jquery - Is there a way to provide a fallback (local) image when the preferred (external/server/remote/cloud) image fails to load? -
i have anchor tags so:
<a href=\"http://www.duckbill.com" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.duckbill.com/platypionvacation.jpg\" alt=\"platypi playing pinochle , eating pizza in panama\" /></a>
...that fail load src image; in such cases i'd to, after sufficient delay (a couple of seconds), replace with:
<a href=\"http://www.duckbill.com" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"content/images/platypionvacation.jpg\" alt=\"platypi playing pinochle , eating pizza in panama\" /></a>
i know in jquery, how able programmatically determine remote file did not load and, when such case, respond using fallback image?
update
i brad christie's answer unavailable images, want never show "unavailable" - use local 1 if remote 1 not available @ moment. this: http://www.cirkuit.net/projects/jquery/onimagesload/example1.html how determine programmatically image failed?
<img src="http://remotecdn.com/myimage.jpg" data-failover="/assets/notfound.jpg" />
then:
<script> $('img[data-failover]').error(function(){ var failover = $(this).data('failover'); if (this.src != failover){ this.src = failover; } }); </script>
attempt load actual source, in event of error use failover
data property convert local resource. since we're keeping supplemental information separated, should gracefully fail in browsers can't/won't support it.
more information .error()
.
Comments
Post a Comment