Jquery 加载中的所有图像后淡入div容器

我有这个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>

试试看

使用该插件将使一切变得更加容易。这是一个例子

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');
})

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