加载页面加载后加载的图像的屏幕/ div

Question

我创建了一个带有div的加载屏幕，在页面加载后淡出，但是我有一个用户点击链接后使用Jquery从另一个html页面加载的库。我需要创建另一个按下按钮时出现的加载屏幕。

当前Jquery：

$(window).on('load', function(){
    $("#preloader").fadeOut(300);
});

$('#header-amsterdam').click(function() {
    $("#gallery_amsterdam").load("amsterdamgallery.html");{);

当前的CSS：

#preloader {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(255,165,0,1.00);
z-index: 2000;

}

从单独文档加载的HTML：

<div class="image">
    <ul class="image_holder">
        <li><a class="image1 image_select" href="#"><img src="images/AM/AM1.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM2.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM3.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM4.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM5.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM6.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM7.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM8.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM9.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM10.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM11.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM12.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM13.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM14.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM15.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM16.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM17.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM18.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM19.jpg" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/AM/AM20.jpg" width="100%" height="auto"></a></li>
        </ul>
    </div>