Javascript 如何检查移动浏览器视口中可见的所有元素

我试图检查包含图像的div是否在视口中

我尝试了以下代码

$.fn.is_on_screen = function () {
    var win = $(window);
    var viewport = {
        top: win.scrollTop(),
        left: win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
CheckIt();

function CheckIt() {
    $('.target').each(function () {
        if ($(this).find('img').attr('data-src')) { // if target element exists in DOM
            if ($(this).is_on_screen()) { // if target element is visible on screen after DOM loaded
                if ($(this).find('img').attr('data-src')) {
                    var source = $('.target').find('img').attr('data-src');

                    $('.target').find('img').attr('src', source);
                    $(this).find('.log').html('<div class="alert alert-success">target element is visible on screen</div>');

                }
                // log info     
            } else {

                $(this).find('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
            }
        }
    });

}
$(window).scroll(function () { // bind window scroll event
    CheckIt();
});

$.fn.is\u在屏幕上=函数（）{
var win=$（窗口）；
变量视口={
top:win.scrollTop（），
左：win.scrollLeft（）
};
viewport.right=viewport.left+win.width（）；
viewport.bottom=viewport.top+win.height（）；
var bounds=this.offset（）；
bounds.right=bounds.left+this.outerWidth（）；
bounds.bottom=bounds.top+this.outerHeight（）；
返回（！（viewport.rightbounds.right | | viewport.bottombounds.bottom））；
};
检查它（）；
函数CheckIt（）{
$（'.target'）。每个（函数（）{
if（$（this.find（'img'）.attr（'data-src'））{//if目标元素存在于DOM中
if（$（this）.is_on_screen（））{//if加载DOM后目标元素在屏幕上可见
if（$（this）.find（'img'）.attr（'data-src'））{
var source=$（'.target'）.find（'img'）.attr（'data-src'）；
$（'.target'）.find（'img'）.attr（'src'，source）；
$（this.find（'.log'）.html（'目标元素在屏幕上可见'）；
}
//日志信息
}否则{
$（this.find（'.log'）.html（'目标元素在屏幕上不可见'）；//日志信息
}
}
});
}
$（窗口）.scroll（函数（）{//绑定窗口滚动事件
检查它（）；
});

它正在渲染视图端口下方的图像

如果您能为我们提供帮助，我们将不胜感激

---

谢谢和问候

我已经试过了@Alex bro。仍然不起作用我会简短地看一下这个问题实际上你的代码确实起作用我相信在移动设备上出现问题的原因是视口在移动设备上的行为非常不同。不过，我不确定最好的解决方案是什么。