淡入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"); 
});