我有以下
元素,在其中加载图像。我只想在其中所有的图像都加载完毕后才显示
我尝试了以下jQuery代码:
#main-slider
:我尝试了以下jQuery代码:
$(window).load(function() {
$('#main-slider').animate({'opacity':1}, 300);
});
但是它会在所有图片都没有加载完成的情况下显示div
。
CSS
#main-slider,
#main-slider #bo,
#main-slider #bg,
#main-slider #hugo{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}
HTML
<div id="main-slider" class="flexslider">
<div id="boss" class="tab-container">
<ul class="slides boss-slides clearfix">
<li id="1">
<img src="mobilelp/img/boss_mobile_1.png" />
</li>
<li id="2">
<img src="mobilelp/img/boss_mobile_2.png" />
</li>
<li id="3">
<img src="mobilelp/img/boss_mobile_3.png" />
</li>
</ul>
</div>
<div id="bo" class="tab-container">
<ul class="slides bo-slides clearfix">
<li id="1">
<img src="mobilelp/img/bo_mobile_1.png" />
</li>
<li id="2">
<img src="mobilelp/img/bo_mobile_2.png" />
</li>
<li id="3">
<img src="mobilelp/img/bo_mobile_3.png" />
</li>
</ul>
</div>
<div id="bg" class="tab-container">
<ul class="slides bg-slides clearfix">
<li id="1">
<img src="mobilelp/img/bg_mobile_1.png" />
</li>
<li id="2">
<img src="mobilelp/img/bg_mobile_2.png" />
</li>
<li id="3">
<img src="mobilelp/img/bg_mobile_3.png" />
</li>
</ul>
</div>
<div id="hugo" class="tab-container">
<ul class="slides hugo-slides clearfix">
<li id="1">
<img src="mobilelp/img/hugo_mobile_1.png" />
</li>
<li id="2">
<img src="mobilelp/img/hugo_mobile_2.png" />
</li>
<li id="3">
<img src="mobilelp/img/hugo_mobile_3.png" />
</li>
</ul>
</div>
<ul class="flex-direction-nav">
<li><a href="#" class="flex-prev">Previous</a>
</li>
<li><a href="#" class="flex-next">Next</a>
</li>
</ul>
</div>