Added image loading error callback #44

Open
wants to merge 1 commit into
from

Conversation

Projects
None yet
9 participants

dijs commented Jul 25, 2012

If lazy load tries to load an image and it fails, a callback is thrown,
with this callback you can reload the image or just handle the error…

@dijs dijs Added image loading error callback
If lazy load tries to load an image and it fails, a callback is thrown,
with this callback you can reload the image or just handle the error…
fb2d323

Currently, the placeholder image (often some sort of loading indicator) will remain despite the fact that the image has failed to load. At the very least, the browser's default missing image icon should be shown.

Owner

tuupola commented Aug 20, 2012

IMO people should be careful enough to write working image links when doing html code. I have not decided yet if I will include this patch.

I've come across the same issue as rompetoto and am thankful for the patch, even though I think the retry-after logic might be a bit far-fetched.

tuupola, even though I agree with you, the web is what it is, i.e. unreliable at times! Even if an image link is valid, you can never be sure that the server hosting that image is always reachable. For that very reason, an error callback makes plain sense.

I'd be really grateful if you could at least include an error callback (one-liner).

calmluna commented Sep 7, 2012

Sometimes unstable network may trigger an image loading error.
You can add the error event callback by yourself:

var settings = {
error: null
};

$("<img />")
.bind("error", function () {
if (settings.error) {
settings.error.call(self);
}
});

if you choose to replace the src attribute with an info image, you must care about stack overflow when info image cannot be loaded.

saas786 commented Oct 11, 2012

Though My issue is not related to image not available, but I noticed sometimes well quite often few placeholder images on page not being replaced with the original images. Any suggestions? How I can trace the casue? or maybe you know the fix?

Owner

tuupola commented Oct 11, 2012

URL of the page you have problems with?

//you can reload img once again:
$('<img />').bind('error',function(){
   $self.attr("src", $self.data(settings.data_attribute));
   $self.unbind('error');
})

Plugin is great, but it removes standard functionality provided by the "onerror" attribute for img tags. My images are not local and there's no better way to verify them then by letting the client do it with img.src and fallback to img.onerror.

zjspeed commented Dec 9, 2015

I'd like a feature such as this for when my CDN fails.

If my CDN mirror image https://cdn.mydomain.com/2345.jpg fails then the client should try my source image https://static.mydomain.com/2345.jpg.

This JavaScript seems to work for non-lazy-loaded images:

$("img").error(function () {
    var oldsrc = $(this).attr("src").toLowerCase();
    if (oldsrc.indexOf("cdn.mydomain.com") >= 0) {
        var newsrc = oldsrc.replace("cdn.mydomain.com", "static.mydomain.com");
        $(this).unbind("error").attr("src", newsrc);
    }
});

I want to be able to do something similar for lazy-loaded images.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment