javascript - 检查div不在叠加层后面时是否可见div

Question

我的页面上有一个叠加层（产生加载效果），后面是内容div。我想在屏幕上显示content div（id content-to-test）时（加载不可见时）触发一个函数。

我正在使用.is（'：visible'）jQuery函数，但是此函数仅检查div的可见性或显示。

我需要检查内容div何时对用户可见

    <div class="container">
        <div id="overlay">
            <br><br>
            <img src="http://www.cariblist.com/loader/new_loading2.gif" style="width: 80px; margin-left: 40%;" />
        </div>
        <div id="content-to-test">
            <br>This is the content
        </div>
    </div>

完整示例： https://jsfiddle.net/42qw0uzf/1/
单击“切换覆盖可见性”或/和“切换内容可见性”以检查标签“内容为：”状态（可见或不可见）

Answer 1

是否不检查叠加层可见性？在您提供的小提琴中使用以下功能似乎可以满足您的要求（see it here）

var result = $('#resutl span');

setInterval(function(){
    if($('#content-to-test').is(':visible') && !$("#overlay").is(":visible")){
        $(result).text('VISIBLE');
    }else{
        $(result).text('INVISIBLE');
    }
}, 200);