我有以下div
元素,并在其中加载图片。我只想在所有图片加载到其中时显示div#main-slider
:
我尝试过以下jQuery:
$(window).load(function() {
$('#main-slider').animate({'opacity':1}, 300);
});
但即使未加载所有图像,它也会显示div
。
#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;
}
<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>
答案 0 :(得分:2)
我也有这个要求。我使用 imagesLoaded plugin 找到了成功。
伪代码基于我目前在我的应用程序中使用的内容:
$('#main-slider').imagesLoaded({
progress: function (isBroken, $allImages, $loadedImages, $brokenImages) {
console.log('ok: ' + $loadedImages.length + ', bad: ' + $brokenImages.length);
},
done: function ($images) {
$('#main-slider').animate({'opacity':1}, 300);
}
});
答案 1 :(得分:1)
它可以非常简单(fiddle):
$(function () {
var $img = $(".waitFor img"),
n = $img.length;
$img.on("load error", function () {
!--n && $(".waitFor").fadeIn(300);
});
});
这有效地等待所有图像加载或错误输出,然后在整个容器中淡出。
答案 2 :(得分:0)
这是一个很简单的问题,我不想为它使用插件。它实际上非常简单,因为jQuery为所有图像元素提供了一个方便的.load()函数:
$(function(){
var loaded = 0;
var total = 0;
$(".waitFor img").each(function(i, e){
total++;
$(e).load(function(){
loaded++;
if(loaded == total)
console.log("Everything loaded");
});
});
});