Images fade in before they finish loading

[witq]

Images fade in before they finish loading

[witq]

Well, I might have found a solution. I changed the main image loading function to check if the $img is loaded before executing. Check it out and maybe you will find it usefull:

// Main function --> Load the images copying the "data-href" attribute into the "src" attribute
        _loadImage : function(options, $img) {

            $img.hide();
            $img.attr("src", $img.attr("data-href"));
            $img.removeAttr('data-href');

            // Check if image is loaded
            $img.load(function() {
                // Images loaded with some effect if existing
                if(options.effect) {
                    if (options.speed) {
                        $img[options.effect](options.speed);
                    } else {
                        $img[options.effect]();
                }
                } else {
                    $img.show();
                }

                // Callback after each image is loaded
                options.callbackAfterEachImage.call(this, $img, options);
            });

        }

[witq]

I guess it's not that easy, just tested it in IE 8 and random images are not loading on page refresh. Bummer.

[witq]

I have found a way to trigger the load event even if images are cached, this solves the problem with images not appearing in IE. This is my modified function:

// Main function --> Load the images copying the "data-href" attribute into the "src" attribute
        _loadImage : function(options, $img) {

            $img.hide();

            // Check if image has finished loading
            $img.attr('src', $img.attr('data-href')).one('load', function() {
                // Images loaded with some effect if existing
                if(options.effect) {
                    if (options.speed) {
                        $img[options.effect](options.speed);
                    } else {
                        $img[options.effect]();
                    }
                } else {
                    $img.show();
                }

                // Callback after each image is loaded
                options.callbackAfterEachImage.call(this, $img, options);

            // Make shure the load event is triggered even if image is already in cache
            }).each(function(){
                if(this.complete || this.complete == undefined) 
                $(this).trigger('load');
            });

            $img.removeAttr('data-href');

        }

[philoye]

Knowing when images have loaded is a hard problem.

Here's a jQuery library originally created by Paul Irish which has had a lot of work. It still has some quirks, but probably the best thing out there, and probably worth using.

[humancopy]

It's not so difficult. :)

Need to make sure the onload is assigned before assigning the source to an Image object, then it is always called even if the image is in the browser's cache already.

Please see commit humancopy/JAIL@42f76ed

[sebarmeli]

See Pull Request #23.