在
<div id="all-images">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
我想要显示id =“全图像”的所有图像,只有当此id中的所有图像将完全加载(Jquery)时.
在加载所有图像之前,本节显示“加载..”文本
解决方法
假设你的div是预先隐藏的：
$("#loadingDiv").show();
var nImages = $("#all-images").length;
var loadCounter = 0;
//binds onload event listner to images
$("#all-images img").on("load",function() {
loadCounter++;
if(nImages == loadCounter) {
$(this).parent().show();
$("#loadingDiv").hide();
}
}).each(function() {
// attempt to defeat cases where load event does not fire
// on cached images
if(this.complete) $(this).trigger("load");
});