仅在完全加载后显示所有图像 [英] Show all images only after their complete load
本文介绍了仅在完全加载后显示所有图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在
<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中的所有图像都将完全加载(jQuery)时,我才想显示id ="all-images"的所有图像.
I want to show all Images of id="all-images" only when all the images inside this id will load completely (Jquery).
在加载所有图像之前,此部分显示正在加载.."文本
And before loading all images this section shows "Loading.." text
推荐答案
假设您的div已被预先隐藏:
Assuming your div is pre-hidden:
$("#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");
});
这篇关于仅在完全加载后显示所有图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文