Javascript 预加载程序到来前灯箱背景闪烁问题

我正在尝试使用prelaoder创建灯箱。虽然我已经这样做了，但我遇到的唯一问题是在使用prelaoder之前，灯箱背景（遮罩）会闪烁。只有在我们第一次单击刷新/打开页面时才会发生这种情况

下面是一个工作示例：

脚本：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(window).load(function(){
        function customOverlay(){ 

                var popupWin = $("#custom-popup-win");
                var popMargTop = ($(popupWin).height()) / 2; 
                var popMargLeft = ($(popupWin).width()) / 2; 

                $(popupWin).css({ 
                    'margin-top' : -popMargTop,
                    'margin-left' : -popMargLeft
                });

                $('#preloader').delay(3500).fadeOut('slow')

                $(".popup-window").click(function(){
                    $("#custom-overlay").fadeIn("slow");
                    $("#custom-popup-win").fadeIn("slow");
                }); 

                $("#custom-popup-win .close-button").click(function(){
                    $("#custom-overlay").fadeOut("fast");
                    $("#custom-popup-win").fadeOut("fast");
                }); 


        }

        customOverlay();

});

</script>

$（窗口）。加载（函数（）{
函数customOverlay（）{
var popupWin=$（“#自定义弹出窗口赢”）；
var popMargTop=（$（popuwin）.height（））/2；
var popMargLeft=（$（popuwin）.width（））/2；
$（popupWin）.css（{
“页边距顶部”：-popMargTop，
“左边距”：-popMargLeft
});
$（“#预加载程序”）。延迟（3500）。淡出（“慢”）
$（“.popup window”）。单击（函数（）{
$（“#自定义覆盖”）.fadeIn（“慢”）；
$（“#自定义弹出窗口赢”）.fadeIn（“慢”）；
}); 
$（“#自定义弹出窗口win.close按钮”）。单击（函数（）{
$（“#自定义覆盖”）.fadeOut（“快速”）；
$（“#自定义弹出窗口赢”）.fadeOut（“快速”）；
}); 
}
customOverlay（）；
});

风格：

<style type="text/css">
* { padding: 0; margin: 0; }
body { font-family: Verdana, Geneva, sans-serif; font-size: 12px; }
#custom-overlay { width: 100%; height: 100%; background: #000; position: fixed; top: 0; right: 0; bottom: 0; left: 0; /*background:url(images/bg-repeat.png) 0 0;*/ z-index: 1000; display: none;
opacity: 0.6;
filter: alpha(opacity=60);
 }
#custom-popup-win { width: 600px; height: 400px; margin: 0 auto; background: #fff; position: fixed; top: 50%; left: 50%; z-index: 1500; box-shadow: 0 0 10px #000; /*-o-box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; -webkit-box-shadow: 0 0 10px #000; -ms-box-shadow: 0 0 10px #000;*/ display: none; }
#custom-popup-win table { margin: 20px; }
#custom-popup-win table td { width: 20%; padding: 5px 12px; }
#custom-popup-win .close-button { cursor: pointer; /*padding:5px 3px;
    background:#000;
    color:#ccc;
    text-align:center;
    font-size:13px;
    font-weight:bold;
    box-shadow:0 0 20px #777;*/
position: absolute; width: 26px; height: 26px; top: -10px; right: -10px; background-image: url(images/popup_close_btn.png); }
#preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 99; }
#status { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; background-image: url(images/status.gif); background-repeat: no-repeat; background-position: center; margin: -100px 0 0 -100px; }
</style>

*{填充：0；边距：0；}
正文{字体系列：Verdana，日内瓦，无衬线；字体大小：12px；}
#自定义覆盖{宽度：100%；高度：100%；背景：#000；位置：固定；顶部：0；右侧：0；底部：0；左侧：0；/*背景：url（images/bg repeat.png）0 0；*/z-index:1000；显示：无；
不透明度：0.6；
过滤器：α（不透明度=60）；
}
#自定义弹出窗口赢{宽度：600px；高度：400px；边距：0自动；背景：fff；位置：固定；顶部：50%；左侧：50%；z索引：1500；方框阴影：0 0 10px#000；/*-o-box-shadow:0 10px#000；-moz方框阴影：0 10px#000；-webkit方框阴影：0 10px#000；-ms方框阴影：0 10px#000；*/display
#自定义弹出窗口赢表{margin:20px；}
#自定义弹出窗口赢表td{宽度：20%；填充：5px 12px；}
#自定义弹出窗口win.close按钮{光标：指针；/*填充：5px 3px；
背景：#000；
颜色：#ccc；
文本对齐：居中；
字体大小：13px；
字体大小：粗体；
盒影：0 0 20px#777*/
位置：绝对；宽度：26px；高度：26px；顶部：-10px；右侧：-10px；背景图像：url（images/popup_close_btn.png）；}
#预加载程序{位置：固定；顶部：0；左侧：0；右侧：0；底部：0；背景色：#fff；z索引：99；}
#状态{宽度：200px；高度：200px；位置：绝对；左侧：50%；顶部：50%；背景图像：url（images/status.gif）；背景重复：不重复；背景位置：中间；边距：-100px 0-100px；}

HTML:

乱数假文
乱数假文
乱数假文
乱数假文
乱数假文

你的小提琴没有work@Danko..link正在更新并正在工作。是否希望加载始终或仅第一次加载。。。我想第一次加载，这是第一次，问题是当我们刷新页面和第一次点击弹出按钮比一秒钟弹出背景来了和消失，比预加载来。。我不想让灯箱的背景在预演前出现。你看到我贴的小提琴了吗？

<input type="button" value="Popup" class="popup-window"  />
<div id="custom-overlay"></div>
<div id="custom-popup-win">
        <div class="close-button"></div>
        <div id="preloader">
                <div id="status">&nbsp;</div>
        </div>
        <table width="90%" border="1" cellspacing="0" cellpadding="0">
                <tr>
                        <td>lorem ipsum</td>
                        <td>lorem ipsum</td>
                        <td>lorem ipsum</td>
                        <td>lorem ipsum</td>
                        <td>lorem ipsum</td>
                </tr>

        </table>
</div>