Question

目前，当点击一个元素时，我有一个加载更多按钮，如下所示：

<script type="text/javascript">
     $(document).on('click', '#loadmore', function() {

         etc....
     });
</script>

但是有一种方法可以在div进入浏览器视图时运行吗？真的把它变成无限负荷？我一直在四处搜寻，无法找到任何解决方案，但看起来似乎有可能。

因此，用户将浏览页面，查看元素<div id="#loadmore">并运行函数？

Answer 1

你可以尝试这个插件jquery-appear。

Answer 2

您也可以使用以下方法，即使我建议使用xdazz建议的库版本

//returns the size of the whole html
function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

//returns the size of the browser window
function viewport() {
    var e = window, a = 'inner';
    if ( !( 'innerWidth' in window ) ){
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}

//register a scroll listener, that checks if you are at the end of the page
$(window).scroll(function(){
    if( $(window).scrollTop()+viewport()["height"] >= getDocHeight() ){
         //your method here
         loadMore();
    }
});

Answer 3

if(window.addEventListener)
{
window.addEventListener("scroll", function() {
          var div = document.getElementById("myDiv");
          if(div.offsetTop <= window.innerHeight)
          {
               clearInterval(timer);
               // call your functions here
          });
}
else if(window.attachEvent)
{
     window.attachEvent("onscroll", function() {
          var div = document.getElementById("myDiv");
          if(div.offsetTop <= window.innerHeight)
          {
               clearInterval(timer);
               // call your functions here
          })
}

Answer 4

http://api.jquery.com/visible-selector/

jquery可见选择器将起作用

查看元素时运行jQuery函数

4 个答案: