当所有图像都已加载时淡入div容器

Question

我有这个div容器，并且在我有图像的情况下，当其中的所有图像都已加载时，我想淡入整个.slider容器。我怎么能用jquery做到这一点？谢谢！

 <div class="slider">
            <div class="slide1 slide">
                <img src="img/model1.png" >
             </div>
<div class="slide2 slide">
                <img src="img/model1.png" >
             </div>
<div class="slide3 slide">
                <img src="img/model1.png" >
             </div>
</div>

Answer 1

尝试

jQuery(function () {
    var $slider = $('.slider'),
        $imgs = $slider.find('img'),
        counter = 0;
    //wait for the images to load
    $imgs.load(function () {
        //increment the loaded image counter
        counter++;
        //if the counter matches the images count then show the slider
        if (counter == $imgs.length) {
            $slider.show()
        }
    }).filter(function () {
        //trigger the load event for already loaded images
        return this.complete
    }).trigger('load');
})

Answer 2

使用imagesLoaded插件将使一切变得更加轻松。这是一个example。

imagesLoaded($(".slider"), function() {
    $(".slider").fadeIn("slow");
});