<!DOCTYPE=html>

<html>

<head>

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

</head>

<body>

    <div>下拉加载更多</div>

    <div class="main" style="height:700px;overflow:auto;">

        <div class="child" style='border:1px solid red;margin-top:20px;color:grey;height:800px' ></div>

    </div>

</body>

<script  type="text/javascript">

$(document).ready(function(){

    $(".main").unbind("scroll").bind("scroll", function(e){

        var sum = this.scrollHeight;

        if (sum <= $(this).scrollTop() + $(this).height()) {

            $(".main").append($(".child").clone());

        }

    });

});

</script>

</html>

如果等滚动条拉到底部时再加载，会影响用户体验。因为一般动态加载的时候都需要向服务端请求资源，这时需要时间。一个更佳的方式是，当滚动条距离底部一定距离（C）时，就动态加载更多，向服务端请求资源。也就是预加载，预读取。公式如下。

this.scrollHeight - C <= $(this).scrollTop() + $(this).height()

JQ下拉加载更多的更多相关文章

  1. Windows Phone 8.1开发：如何让ListView下拉加载更多？

    Windows Phone 8.1开发中使用ListView作为数据呈现载体时,经常需要一个下拉(拇指向上滑动)加载更多的交互操作.如何完成这一操作呢?下面为您阐述. 思路是这样的: 1.在ListV ...

  2. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

  3. iscroll.js实现上拉刷新，下拉加载更多，应用技巧项目实战

    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...

  4. jquery实现下拉加载更多

    下拉加载更多这种原理很容易想明白,但是不自己写一个简单的,老是不踏实,获取什么高度再哪里获取之类的.于是自己简单写了个,就是页面上有几个div,然后当滚动条拉到某个位置的时候,再继续加载div.顺便又 ...

  5. 下拉加载更多DEMO(js实现)

    项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...

  6. dropload.js下拉加载更多

    项目中有用到下拉加载更多的地方,去网上找了一个插件,地址:http://ons.me/526.html总体还是不错的,可能自己不是特别了解这个插件,做项目时,也是遇到了无数问题.项目中要用的是两个ta ...

  7. H5页面下拉加载更多(实用版)

    近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有.   醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件  还可以,但是 ...

  8. 微信小程序实现上拉和下拉加载更多

    在上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更 ...

  9. 集成iscroll 下拉加载更多 jquery插件

    一个插件总是经过了数月的沉淀,不断的改进而成的.最初只是为了做个向下滚动,自动加载的插件.随着需求和功能的改进,才有了今天的这个稍算完整的插件. 一.插件主功能: 1.下拉加载 2.页面滚动到底部自动 ...

随机推荐

  1. Java for LeetCode 135 Candy

    There are N children standing in a line. Each child is assigned a rating value. You are giving candi ...

  2. Gemini.Workflow 双子工作流入门教程一：定义流程：流程图属性

    简介: Gemini.Workflow 双子工作流,是一套功能强大,使用简单的工作流,简称双子流,目前配套集成在Aries框架中. 下面介绍本篇教程:流程定义:流程图属性. 步骤一:在流程管理的流程定 ...

  3. Vim设置括号自动补全和快速跳出

    一.设置括号自动补全 inoremap ' ''<ESC>i inoremap " ""<ESC>i inoremap ( ()<ESC&g ...

  4. js/jq 动态添加的元素不能触发绑定事件解决方案

    <!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...

  5. apache-tomcat 及对应eclipse下载地址for mac

    tomcat 7.0.42http://mirrors.hust.edu.cn/apache/tomcat/tomcat-7/v7.0.42/bin/apache-tomcat-7.0.42.zip ...

  6. Lucene默认的打分算法——ES默认

    改变Lucene的打分模型 随着Apache Lucene 4.0版本在2012年的发布,这款伟大的全文检索工具包终于允许用户修改默认的基于TF/IDF原理的打分算法.Lucene API变得更加容易 ...

  7. cifs挂载远程文件出现 No such device or address错误

    1. 参考 https://www.raspberrypi.org/forums/viewtopic.php?t=82199 找了两天看到这个文章才解决了问题. 我是之前同事在windows上挂载成功 ...

  8. codeforces 569C C. Primes or Palindromes?(素数筛+dp)

    题目链接: C. Primes or Palindromes? time limit per test 3 seconds memory limit per test 256 megabytes in ...

  9. BZOJ3991：寻宝游戏 （LCA+dfs序+树链求并+set）

    小B最近正在玩一个寻宝游戏,这个游戏的地图中有N个村庄和N-1条道路,并且任何两个村庄之间有且仅有一条路径可达.游戏开始时,玩家可以任意选择一个村庄,瞬间转移到这个村庄,然后可以任意在地图的道路上行走 ...

  10. WCF知识点（应用WCF支持原生Socket访问， 原始字节流传输）

    最近在做区域医疗中PIX时, 需要让PIX Manager同时支持HL7的V2和V3版本.思路是利用WCF来同时支持V2版本的c/s架构式的消息协议和V3版本WebService的Soap协议.  实 ...