Question

我对预加载器有一个小问题。我有一个来自第三方的预加载器，显示几秒钟（取决于广告）。我能够显示预加载器，但现在的问题是我想要隐藏另一个div（游戏），直到预加载器消失。

预加载器在完成后获得可见性：对象中的隐藏样式。我试过这个没有成功：

<script type="text/javascript">
if($('#preloader').is(':visible')) {
    $("#game_container").hide();
}
</script>

提前致谢。

Answer 1

你需要附加一个事件监听器来监听on show / hide，我最近遇到过这种类型的问题。这是我写的解决方案：

$(document).ready(function(){
    $("#preloader").on({
        "show": function(){
            $("#game_container").hide();
        },
        "hide": function(){
            // Do something
        }
    });
});

// Custom event handler for hide and show
(function ($) {
    $.each(['show', 'hide'], function (i, ev) {
        var el = $.fn[ev];
        $.fn[ev] = function () {
            this.trigger(ev);
            return el.apply(this, arguments);
        };
    });
})(jQuery);

将自己的自定义事件处理程序附加到on函数后，它将侦听隐藏和显示事件，然后您可以根据需要在元素上使用它。

我希望这有帮助！

Answer 2

我已经创建了一个快速JSFiddle，可以满足您的需求：

HTML：

<div id="preloader">
    PreLoader
</div>

<div id="game_container">
    My Game
</div>

CSS：

#preloader { display:block; position:absolute; width:200px; height:200px; background:blue;; color:#fff; font-size:2em; }
#game_container { display:none; width:200px; height:200px; background:red; color:#fff; font-size:2em; }

JS：

var checkPreloaderInterval = setInterval(showGameContainerIfPreloaderHidden, 200);

function showGameContainerIfPreloaderHidden()
{
    if($('#preloader').is(':hidden')) {
        $("#game_container").fadeIn();
        clearInterval(checkPreloaderInterval);
    }   
}

setTimeout(function(){$('#preloader').fadeOut()}, 3000);

我设置了一个间隔，用于检查preloader div是否隐藏。如果是，我们会显示game_container。

我有一个人工超时，在3000秒后隐藏preloader div。这实际上不是解决方案的一部分，它只是复制隐藏的preloader。

当对象不再可见时显示div

2 个答案: