Question

Why the content loaded, but the images still loading?
How to load a content (include content’s images) and then fadein?

js

$(document).ready(function(){
    $('#contents').fadeOut('slow', function(){
        $(this).load("url", {}, function(){

            $("#contents").fadeIn('slow', function(){

                alert('Faded in!');

            });

        });

    });
});

Answer 1

This is not so straightforward. You need to get load handlers onto the dynamically loaded images, but without modifying the source HTML you can’t do that until they’ve already started loading which makes it a bit more complicated because some might actually complete before you check. So, you could do something like this which gets all the image objects in the dynamically loaded content and then checks each one to see if it has finished loading. If it has not finished loading, then an onload handler is installed so we can count when the last one finished loading. When all are done loading, we can then do the fadeIn():

$(document).ready(function(){
    $('#contents').fadeOut('slow', function(){
        var self = $(this);

        function fadeIn() {
            $("#contents").fadeIn('slow', function(){
                alert('Faded in!');
            });
        }

        self.load("url", {}, function() {
            var imgs = self.find("img");
            var imgsRemaining = imgs.length;
            imgs.each(function() {
                // if the image isn't already loaded, then attach an onload handler
                if (!img.complete || !this.height || !this.width) {
                    this.onload = this.onerror = this.onabort = function() {
                        // decrement imgsRemaining
                        --imgsRemaining;
                        // if no more images to finish loading, then start the fade
                        if (imgsRemaining == 0) {
                            fadeIn();
                        }
                    });
                } else {
                    // this image already loaded
                    --imgsRemaining;
                }
            });
            // if there were no images that weren't loaded yet
            if (imgsRemaining == 0) {
                fadeIn();
            }
        });
    });
});

---

Or, for a little more general purpose way of solving the problem, here’s a generic jQuery method that loads content and then calls the callback when both the content and all images in the content have finished loading. This would be a lot more reusable and probably make your code more readable. You use it just like the .load(url, data, fn) method:

jQuery.fn.loadComplete = function(url, data, fn) {
    // check if optional data argument is missing
    if (typeof data == "function") {
        fn = data;
        data = {};
    }
    // dynamically load the content
    this.load(url, data, function() {
        var self = this;
        // when content is parsed, check to see when all images are loaded
        var imgs = $(this).find("img");
        var imgsRemaining = imgs.length;
        imgs.each(function() {
            if (this.complete) {
                // if image is already loaded, just decrement the count
                --imgsRemaining;
            } else {
                // image not loaded yet, install onload handler
                this.onload = this.onerror = this.onabort = function() {
                    // when img has finished loading, check to see if all images are now loaded
                    if (--imgsRemaining == 0) {
                        fn.call(self);
                    }
                };
            }
        });
        if (imgsRemaining == 0) {
            fn.call(self);
        }
    });
}

So, with this new method, your code would just be this:

$(document).ready(function(){
    $('#contents').fadeOut('slow', function(){
        $(this).loadComplete("url", {}, function(){
            $("#contents").fadeIn('slow', function(){
                alert('Faded in!');
            });
        });
    });
});