On error load fallback

[marcrobledo]

It would be great if we could set an image used as a fallback if data-src failed to load.

Example: <img data-src="image.png" data-errorsrc="notfound.png" class="lozad" />

[ApoorvSaxena]

@marcrobledo this seems like a good idea, this should be done in conjunction to https://github.com/ApoorvSaxena/lozad.js/pull/79

[rezelute]

I was just wondering if this has been implemented yet? If not, is the best workaround for now: Load the image via: var tester=new Image(); tester.onerror=imageNotFound; and in the imageNotFound() function, give the data-src a different path to the file we know failed? Seems abit silly as we may end up loading the image twice.

Thanks.

[SEIjaz]

Can any body let me know fallback is implemented in library or not?

[jariesdev]

Just a workaround:

var observer = lozad('.lozad', {
	loaded: function(el) {
	el.classList.add('loaded');
		try {
			var img = new Image();
			img.src = el.getAttribute('data-src');
			img.addEventListener('error', function(e){
				el.classList.add('error');
			}, false);
		}catch(e){
			console.log(e);
		}
	}
});
observer.observe();

[vpckso]

My workaround is:

lozad('.lozad', {
	load: function(el) {
		e.onerror = function() {
			e.src = el.getAttribute('data-errorsrc');
		};
		el.src = el.getAttribute('data-src');
	}
});