jQuery 滚动条下拉加载内容

现在很多网站为了更好的用户体验,那么就会预先加载一部分内容,等到滚动条下拉到底部的时候,然后使用 ajax或其它技术,请求更多的内容,这样会使网页的用户体验会更好些,那么这个是怎么样做到的呢?现在就在这里提供一种思路出来...

$(function(){

//思路是:如果内容区域 小于等于 可视区高度加滚动条的高度的话那么就进行加载...

$(window).scroll(function(){

// document 文档高度

var docHeight = $(document).height();

// window 可视区高度

var rollHeight = $(window).height();

//window 滚动条高度

var scrHeight = $(window).scrollTop();

//如果内容区域 小于等于 可视区高度加滚动条的高度的话那么就进行加载...

if (docHeight <= (rollHeight+scrHeight)) {

//你所要执行的其它代码...

alert(1);

};

});

});

jQuery 滚动条下拉加载内容

时间: 2024-10-07 15:57:09

jQuery 滚动条下拉加载内容的相关文章

jQuery实现下拉加载更多

<!DOCTYPE=html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js&

jquery实现下拉加载功能

<script> var str = ''; if(page=="") page=1; var stop=true;//触发开关,防止多次调用事件 $(window).scroll( function(event){ //当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载. if ($(this).scrollTop() + $(window).height() + 10 >= $(document).height() && $(

JQuery实现无刷新下拉加载图片

      最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQuery写下拉触发ajax事件 $(window).scroll(function () { if($(window).scrollTop()==($(document).height()-$(window).height()))//判断右边滑动条是否滑到最下 { $.ajax({ url:"&quo

jQuery手机端上拉刷新下拉加载更多页面

<!doctype html> <html> <head> <title>jquery 手机端上拉刷新下拉加载更多页面</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewpost" content="width=device-wi

下拉加载的实现

HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>下拉加载</title> <script src="jquery.js"></script> </head> <body> <div id="container"> 下拉加载<br/

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

项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判断滚动条滚到底呢? 当滚动条的高度加上滚动条到div顶部的高度等于div的可滚动高度时,说明滚动条到底部了.公式如下. [javascript] view plain copy this.scrollHeight <= $(this).scrollTop() + $(this).height() 给

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

闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前,先把实现的基本原理说一下.当夜幕下拉到底部的时候,js可以判断滚动条的位置,到达底部触发js方法,执行jquery的ajax方法,向后台一般处理程序夜幕ashx文件请求数据源,得到json格式的数据源.然后,遍历json数据源,拼接一个li标签,再填充到页面上去. 首先,我们来做个简单的html页面

常见开发需求之angular下拉加载更多

需求   移动端使用angular实现下拉加载更多的条目,这个需求比较常见,网上的插件改动起来比较麻烦,不如自己写一个最适合,以前有同事写了一个,bug太多,后来改分页了,我们产品说什么都让做,么办法,只能自己动手写一下,我的思路就是当页面第一次加载的时候我们先固定请求一部分数据进行显示,之后使用js探测垂直滚动条的滚动距离,当页面即将触底的时候发送第n+1请求,为防止在请求过程中重复请求加入了截流判断,其次在请求过程中页面最底部出现加载等待动画.如图所示 指令实现 // isBottom为防止

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

上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼的问题,给点提示 :#wrapper,以及#scroller-content要注意) html如下: <div class="viewport"> <div id="wrapper" class="wrapper"> <