编程 Javascript

jquery滚动加载数据的方法

Posted in Javascript onMarch 09, 2015

本文实例讲述了jquery滚动加载数据的方法。分享给大家供大家参考。具体分析如下：

我们浏览有些网页的时候，当拉动浏览器的滚动条时到页底时，页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术，我们发现很多网站用到这种技术，例如新浪微博、QQ空间等。

代码如下：

<!DOCTYPE=html>

<html>

<head>

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

   <script type="text/javascript">

    $(document).ready(function(){

        var range = 50;             //距下边界长度/单位px

        var elemt = 500;           //插入元素高度/单位px

        var maxnum = 20;            //设置加载最多次数

        var num = 1;

        var totalheight = 0; 

        var main = $("#content");                     //主体元素

        $(window).scroll(function(){

            var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)

            //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());

            //console.log("页面的文档高度 ："+$(document).height());

            //console.log('浏览器的高度：'+$(window).height());

            totalheight = parseFloat($(window).height()) + parseFloat(srollPos);

            if(($(document).height()-range) <= totalheight  && num != maxnum) {

                main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac"+(num%20)+(num%20)+";height:"+elemt+"' >hello world"+srollPos+"---"+num+"</div>");

                num++;

            }

        });

    });

    </script>

</head>

<body>

    <div id="content" style="height:960px">

        <div id="follow">this is a scroll test;<br/>    页面下拉自动加载内容</div>

        <div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</div>

    </div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

jquery滚动加载数据的方法

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript中的其他对象

Jan 16 Javascript

IE6下JS动态设置图片src地址问题

Jan 08 Javascript

jquery绑定事件不生效的解决方法

Feb 11 Javascript

Bootstrap基本插件学习笔记之标签切换(17)

Dec 08 Javascript

微信小程序 checkbox组件详解及简单实例

Jan 10 Javascript

使用Bootstrap + Vue.js实现添加删除数据示例

Feb 27 Javascript

使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能

Mar 15 Javascript

ES6中class类用法实例浅析

Apr 06 Javascript

javascript 中关于array的常用方法详解

May 05 Javascript

JavaScript中变量提升与函数提升经典实例分析

Jul 26 Javascript

javascript实现遮罩层动态效果实例

May 14 Javascript

微信小程序实现图片选择并预览功能

Jul 25 Javascript

jQuery晃动层特效实现方法

Mar 09 #Javascript

javascript中hasOwnProperty() 方法使用指南

Mar 09 #Javascript

jQuery设置和移除文本框默认值的方法

Mar 09 #Javascript

jQuery读取XML文件内容的方法

Mar 09 #Javascript

JQuery动态添加和删除表格行的方法

Mar 09 #Javascript

Python脚本后台运行的几种方式

Mar 09 #Javascript

JS控制表格实现一条光线流动分割行的方法

Mar 09 #Javascript