Question

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

- 的修改 - 重要提示：请通过滚动我不需要一个triger，我需要从显示对象中取消，就像某些图像处于焦点时一样。谢谢！

Answer 1

如果您正在使用jQuery框架，请查看无限滚动：

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

Answer 2

以下是一些在.scroll()上运行的代码，并计算当前滚动的底部距离..

http://jsfiddle.net/hRSE8/（在此示例中，我手动添加一些文本以展示添加内容的效果，并调整滚动系统）

在指定距离，您可以使用.ajax()

加载内容

简而言之

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

<强> 更新

以下是一个更新的示例，该示例将显示元素何时处于视图中（其他更新以匹配评论中的规范）

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" />

的加载程序

Answer 3

我以前从未这样做过，但我会怎样做：

我会使用以下方法计算页面的滚动位置：

$(window).scrollTop();

然后我会在页面上找到滚动位置元素：

$(element selector).scrollTop()

一旦第一个数字大于第二个数字（加上可能是一个缓冲区），那么继续进行ajax调用以加载你想要的任何内容。

这是理论上的，因为我从未做过，但似乎合乎逻辑。任何人都可以随意纠正我可能出错的地方。

编辑：你也可以使用这篇文章的答案： Check if element is visible after scrolling

查看元素在屏幕上是否可见，然后在此时加载。

虽然这些解决方案中的任何一个都需要您为滚动事件添加事件处理程序。

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

3 个答案: