javascript - 使用 imagesLoaded 将页面加载器仅定时到可见图像

Question

我想我已经很接近解决这个问题了，但我不精通 javascript 和 jquery。我尝试使用的解决方案是 imagesLoaded ( http://imagesloaded.desandro.com/ )。

本质上，我希望具有较大模态内容(在页面加载时隐藏)的页面看起来加载得更快。换句话说，即使模态图像继续在后台加载，我也希望加载程序(带微调器的灰色叠加层)在加载可见图像时清除。

我的策略是在 html 中创建一个 div 并将每个可见图像的副本放入其中。在我的 CSS 中，我将此 div 设置为“display: none;”也许将它放在“-9999”的顶部和左侧。所以这个 div 将加载图像但永远不会在屏幕上绘制。

现在，我想为带有 imagesLoaded 的加载器元素触发“.fadeOut”函数，分配给上面的 div。这样，当其余隐藏的模态图像完成加载时，UI 将显示为准备就绪。

我正在尝试这是 jquery，如下所示:

<script>

$('#container').imagesLoaded( function() {
    $(".loader").fadeOut("slow");
	$(".spinner").fadeOut("slow");
	$(".spinnerwrapper").fadeOut("slow");
} );

</script>

.loader {
	position: fixed;
	top: 77px;
	background-color: #000;
	opacity:0.80;
	filter:alpha(opacity=80); /* For IE8 and earlier */
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 900;
}

	#container {
	position: fixed;
	display:none;
	left: -9999px;
	top: -9999px;
}

<!-- page header -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script></head>

<div id="spinnerwrapper">
		<div class="spinner"></div>
	</div>
	
	<div class="loader"></div>

<!-- visible page content -->

<div id="container">
	<img src="images/image_1.jpg">
    <img src="images/image_2.jpg">
    <img src="images/image_3.jpg">
    <!-- etc -->
</div>
</body>

<!-- hidden modal content -->

我几乎可以肯定我的语法在那里是错误的。我只是在学习脚本的基础知识。有人能解决这个问题吗？或者提供替代解决方案？

Answer 1

你的 JS 有一些错误，试试这个:

$('#container').imagesLoaded( {}, function() {
    $(".loader").fadeOut("slow");
    $(".spinner").fadeOut("slow");
    $(".spinnerwrapper").fadeOut("slow");
    $('#container').show();
});

JSFiddle