<!DOCTYPE html>

<html lang="zh-CN">

    <head>

      <meta charset="UTF-8" />

      <title>滚动条到底部时自己加载新的内容</title>

      <script type='text/javascript' src='js/jquery.js'></script>

        <script type="text/javascript">

          var page_num=2;

          $(document).ready(function(){

            $(window).scroll(function(){

              if($(document).scrollTop()>=$(document).height()-$(window).height()){

                var div1tem = $('#container').height()

                var str =''

                $.ajax({

                    type:"GET",

                    url:'ajaxdata',

                    dataType:'json',

                    beforeSend:function(){

                      $('.ajax_loading').show() //显示加载时候的提示

                    },

                    success:function(ret){

                     $(".after_div").before(ret) //将ajxa请求的数据追加到内容里面

                     $('.ajax_loading').hide() //请求成功,隐藏加载提示

                    }

                })

              }

            })

          })

        </script>

      {/literal}

    </head>

    <body>

     <div>

        <div style='width:100%;height:1200px'>文章内容</div>

        <div class='after_div'></div>

　　　　 <div class='ajax_loading' style='background:#F0F0F0;height:60px;width:100%;text-align:center;line-height:60px;font-size:18px;display:none;position:fixed;bottom:0px'><img src="img/loadinfo.net.gif"> 数据加载中</div>

     </div>

    </body>

</html>

参考：http://www.oschina.net/code/snippet_1042544_20893

Jquery实现滚动到底部加载更多（最原始）的更多相关文章

  1. 滚动到底部加载更多及下拉刷新listview的使用

    最新内容建议直接访问原文:滚动到底部加载更多及下拉刷新listview的使用 本文主要介绍可同时实现下拉刷新及滑动到底部加载更多的ListView的使用. 该ListView优点包括:a. 可自定义下 ...

  2. XRecyclerView：实现下拉刷新、滚动到底部加载更多以及添加header功能的RecyclerView

    介绍: 一个实现了下拉刷新,滚动到底部加载更多以及添加header功能的的RecyclerView.使用方式和RecyclerView完全一致,不需要额外的layout,不需要写特殊的adater. ...

  3. ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项

    首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...

  4. jquery页面滑到底部加载更多

    $(window).scroll(function(){ var _scrolltop = $('body').scrollTop();if(_scrolltop+_winHeight>_doc ...

  5. vant list列表滚动到底部加载更多会滚动到顶部问题

    如果使用异步加载数据并使用了vant中的toast做加载中提示,则有可能会导致列表滚动高度为0,也就是回到了顶部.只要在list加载回调里不使用toast就可以避免这个问题.

  6. Android中GridView滚动到底部加载数据终极版

    之前在项目中有一个需求是需要GridView控件,滚动到底部自动加载.但是呢GridView控件并不提供诸如ListView监听滚动到底部的onScrollListener方法,为了实现这样一个效果, ...

  7. Jqeury Mobile实战之切屏效果以及屏幕滚动到底端加载更多和点击切换更多

    http://blog.csdn.net/q718330882/article/details/46120691 //页面滚动到底部加载更多事件 $( window ).scroll(function ...

  8. 使用jquery.more.js上滑加载更多

    html: <div id="more"> <div class="single_item"> <div class=" ...

  9. jQuery实现滚动时动态加载页面内容

    有些网站的网页内容不是一次性加载完毕的,而是在鼠标向下滚动时动态加载的,这是怎么做到的呢?看下面代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

随机推荐

  1. IIS 应用程序池.NET40 重新注册

    32位的Windows:---------------------------------------------------------------------------1. 运行->cmd ...

  2. C#.NET 大型通用信息化系统集成快速开发平台 4.0 版本 - 标准省市县数据的公司选择窗口实现

    若全国各地有上千个分公司,加盟店,网点,那就需要一个友善的选择分公司的功能,得有标准的全国省市县的划分数据.这样有了牢靠的基础数据后,才能开发程序得心应手了.当习惯了开发一个公司内部系统时,全国性大公 ...

  3. 实验一 Java开发环境的熟悉

    实验一 Java开发环境的熟悉(Linux + Eclipse) 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验要求 1.没 ...

  4. HTTP真的很简单

    原文:HTTP Made Really Easy因为我本身网络基础就很差,所以看到这篇文章一方面是学习网络知识,另一方面为了锻炼我蹩脚的英语水平,文中如有错误,欢迎浏览指正! 前言 在看这篇文章的时候 ...

  5. ASP.NET文件上传大小的限制解决方案

    我们大家都知道ASP.NET为我们提供了文件上传服务器控件FileUpload,默认情况下可上传的最大文件为4M,如果要改变可上传文件大小限制,那么我们可以在web.config中的httpRunti ...

  6. Android系统启动分析(Init->Zygote->SystemServer->Home activity)

    整个Android系统的启动分为Linux Kernel的启动和Android系统的启动.Linux Kernel启动起来后,然后运行第一个用户程序,在Android中就是init程序. ------ ...

  7. 多线程处理中Future的妙用

    java 中Future是一个未来对象,里面保存这线程处理结果,它像一个提货凭证,拿着它你可以随时去提取结果.在两种情况下,离开Future几乎很难办.一种情况是拆分订单,比如你的应用收到一个批量订单 ...

  8. 踩到一个Emit的坑，留个纪念

    重现代码: var dmFoo = new DynamicMethod("Foo", typeof(void), Type.EmptyTypes); var ilFoo = dmF ...

  9. 20160803 - C:\WINDOWS\system32\config\systemprofile\Desktop 不可用的解决

    问题:某些软件在从注册表读取用户桌面地址时,欠考虑的%USERPROFILE%的情况,例如迅雷打开文件时,会提示: [Window Title]位置不可用 [Content]C:\WINDOWS\sy ...

  10. j-link或者swd调试

    两种 一.JTAG调试(5针), 二.SWD调试(2针), 在JTAG/SWD模式设置库函数 (在文件stm32f10x_gpio.c中): void GPIO_PinRemapConfig(uint ...