How to combine holder.js and lazyload.js on img tag

Question

According to this link, lazyload is now compliant with the holder.js script.

Here is a jsFiddle. I am expecting the third image to be fading in like the others. But I cannot get it to work.

Can somebody tell me what am I doing wrong ?

Thanks in advance.

HTML :

<img data-src="holder.js/200x200/industrial" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_hood.jpg" alt="BMW M1 Hood">
<img data-src="holder.js/200x200/industrial" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_side.jpg" alt="BMW M1 Side">
<img data-src="holder.js/200x200/industrial" data-original="http://www.appelsiini.net/projects/lazyload/img/does-not-exist" alt="Viper 1">
<img data-src="holder.js/200x200/industrial" data-original="http://www.appelsiini.net/projects/lazyload/img/viper_corner.jpg" alt="Viper Corner">
<img data-src="holder.js/200x200/industrial" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m3_gt.jpg" alt="BMW M3 GT">
<img data-src="holder.js/200x200/industrial" data-original="http://www.appelsiini.net/projects/lazyload/img/corvette_pitstop.jpg" alt="Corvette Pitstop">

JS :

$(function () {
    $("img").lazyload({
        effect: "fadeIn",
        effectspeed: 2000,
        skip_invisible: false
    });
});

Answer 1

The reason the "missing" placeholder doesn't fade in is because lazyLoad's load event never fires on it (its image doesn't exist). You'll need to specify how many images you expect to load and fade them in manually: http://jsfiddle.net/zBuJV/2/

$(function () {
    var expectedImages = 5;
    var loadExpected = (function (totalImages, finishCallback) {
        var total = totalImages;
        var loaded = 0;
        return function () {
            loaded++;
            if (loaded >= total) {
                finishCallback();
            }
        }
    })(expectedImages, function () {
        $("img").fadeIn(2000);
    });

    $("img").lazyload({
        effect: "hide",
        effectspeed: 0,
        skip_invisible: false,
        load: function () {
            loadExpected();
        }
    });
});

lazyLoad doesn't provide an error event, so lazy loading missing images is not easy. If you want to lazy load when the user is scrolling, you'll need to add a scroll spy to fade in images that are known to be loaded at that scroll location as well as any other registered images (i.e. placeholders).