下拉加载的实现

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉加载</title>
<script src="jquery.js"></script>
</head>
<body>
<div id="container">
下拉加载<br/>
</div>
</body>
</html>
<script>
//数据加载时期的gif加载图,用于提示用户数据正在加载!
var loadDiv = ‘<div class="loading"><img src="loading.gif" width="100px" height="100px" ></div>‘;
//监听窗口的鼠标滚轮事件
$(window).scroll(function() {
//当滚轮滚动到文档最末位，也就是拉到了最底下
if( $(window).scrollTop() == $(document).height() - $(window).height() ) {
//避免多次滚轮触发事件造成图片的多次追加，加上此判断
if($(‘#container .loading‘).length == 0) {
//将图片插入到内部的内容最末位
$(‘#container‘).append(loadDiv);
}
//发送ajax请求获取数据
$.ajax({
type: "POST",
url: "load.php",
success: function(data){
//加载成功,移除用于提示用户的动态gif图片
$(‘#container .loading‘).remove();
//追加后端返回的数据
$(‘#container‘).append(data);
}
});
}
});
</script>

PHP

<?php
if(isset($_POST)) {
//为了避免gif图因数据加载过快而破坏测试效果,脚本延时5秒返回
sleep(5);
echo <<<STR
加载成功！<br/>
STR;
}

时间： 2024-08-17 23:41:58

下拉加载的实现的相关文章

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

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

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

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

安卓，采用最简单易懂的方式实现上拉刷新下拉加载更多

一,事先准备: 实现该功能,最基本的需要两个东西,一个是OnTouc

使用谷歌提供的SwipeRefreshLayout下拉控件,并自定义实现下拉加载的功能

package com.loaderman.swiperefreshdemo; import android.os.Bundle; import android.os.Handler; import android.support.v4.widget.SwipeRefreshLayout; import android.support.v7.app.AppCompatActivity; import android.view.Gravity; import android.view.View;

Android之 RecyclerView，CardView 详解和相对应的上拉刷新下拉加载

随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的实现 -- CardView.RecyclerView也是谷歌V7包下新增的控件,用来替代ListView的使用,在RecyclerView标准化了ViewHolder类似于ListView中convertView用来做视图缓存. RecyclerView的优点就是,他可以通过设置LayoutMan

关于MJRefresh的下拉加载数据bug

当没有更多数据的时候显示NoMoreData 我的理解是先结束刷新再显示没有更多今天之前一直没发现有问题贴之前的代码 [self.collectionView reloadData]; [self.collectionView.mj_header endRefreshing]; // 结束刷新 [self.collectionView.mj_footer endRefreshing]; NSArray *arr = data[@"Json"]; if (arr.count == 0

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

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

Windows Phone 8.1开发中使用ListView作为数据呈现载体时,经常需要一个下拉(拇指向上滑动)加载更多的交互操作.如何完成这一操作呢?下面为您阐述. 思路是这样的: 1.在ListView的loaded事件中,获取ListView中的ScrollView对象. 如何获得ScrollViewer,这篇文章说的很清楚! Windows Phone 8.1开发:如何从ListView中,获取ScrollViewer对象 2. 给ScrollViewer创建事件,上篇文章也说了. 3.