php - 仅当网页的一部分显示在浏览器上时才在网页上加载内容

Question

我看到在某些页面中，当您到达页面末尾时，页面会自动加载新数据。例如，一些博客当你到达页面末尾时(到达那里时只加载 10 篇文章)，页面加载 10 篇文章而不按任何东西，所以问题将是，我如何执行/当显示某些内容或用户到达页面的特定位置时触发 php/javascript 命令？ (当然使用加载程序图像)

--编辑--重要提示:我不需要滚动触发，我需要从显示对象触发，比如当某些图像处于焦点时。谢谢!

Answer 1

这是在 .scroll() 上运行的一些代码并计算当前滚动条离底部有多远..

http://jsfiddle.net/hRSE8/ (在这个例子中，我手动添加了一些文本来展示添加内容和滚动系统调整的效果)

在指定距离处，您可以使用 .ajax() 加载内容

简而言之

$(window).scroll(function(){
    var $this = $(this);
    var $body = $('body');
    var distance = $body.outerHeight() - $this.height() - $this.scrollTop() );
});

---

更新

这是一个更新的示例，它将显示元素何时在 View 中(额外更新以匹配评论中的规范)

Demo

<script type="text/javascript">
  $(document).ready(function(){
    $(window).scroll(function(){

        var $window = $(window);

        var visibleTop = $window.scrollTop();
        var visibleBottom = visibleTop + $window.height();

        var elementTop = $('#myloader').offset().top;
        if ( elementTop > visibleTop && elementTop < visibleBottom)
            {
               // loader in view
               // so we remove the loader from the DOM
               $('#myloader').remove();

               // and run the code ..
               $('#tweetsFeed').jTweetsAnywhere(
                             { searchParams: ['ors=patanemo+bocaina+cuyagua+todasana+parguito+%23surfVE&lang=es&geocode=8,-66,1000km'],
                               count: 6 });
            }

    });
  });
</script>

并且您需要在您的页面中放置带有 <img src="loader.gif" id="myloader" /> 的加载程序