`

jQuery判断div滚动到底部,并加载数据的示例,防止重复加载

 
阅读更多
var msg_list_loading = false;
$('.msg_list').on('scroll', function(){
	if ( ! msg_list_loading ){
		load_more_msg();
	}
})
	
function load_more_msg(){	
	var msg_list = $('.msg_list');
	if ( msg_list.height() + msg_list[0].scrollTop >= msg_list[0].scrollHeight - 60 ) { 
		msg_list_loading = true;
		msg_list.append('<div class="loading"></div>');
		$.get('ajax_data.html').done(function( data ){ 
			msg_list.find(".loading").remove();
			msg_list.append( data );
			msg_list_loading = false;
		});
	} 
} 


简单说明:

1、先建立一个变量,判定是否加载中,防止重复加载,

2、在元素上监听scroll事件,调用load_more_msg方法

3、load_more_msg方法中每次重新查找元素,赋给一个变量,判断css高度+滚动的距离,与整个div的文档高度,后面的-60,是一个padding top和bottom的值,可以自行设置。其中msg_list[0]是调用javascript原生对象非jquery对象,方法不同。

4、如果条件为true,锁定加载,ajax调取数据,并执行加载,取消锁定。
分享到:
评论

相关推荐

    Jquery实现手机端上拉滚动加载更多数据

    5. **HTML结构**:`index.html`是整个应用的入口,其中应该包含一个容器元素(如`&lt;div&gt;`),这个元素将会绑定上拉加载的事件,并在滚动到其底部时触发加载更多数据的行为。 6. **图片资源**:`img01.png`, `icon_...

    jquery滚动滚动条加载数据 类似瀑布流

    我们可以在事件处理函数中判断页面是否已经滚动到接近底部,如果接近,就通过Ajax请求获取更多的数据并添加到页面中。 **实现瀑布流布局** 瀑布流布局的关键在于每个元素的定位,需要根据其相邻元素的高度来调整...

    jQuery实现滚动到底部时自动加载更多的方法示例

    在网页开发中,有时我们需要实现一个功能,当用户滚动页面到底部时,自动加载更多内容,这被称为“无限滚动”或“滚动加载”。这个功能在社交媒体、新闻网站和电子商务平台等场景非常常见,能提高用户体验,减少用户...

    jQuery无限滚动加载图片瀑布流代码

    无限滚动是一种用户滚动页面到底部时自动加载更多内容的网页设计技术。这种设计模式通常与Ajax一起使用,当用户接近页面底部时,通过Ajax请求后台数据并动态添加到页面中,这样用户就可以无感知地浏览更多内容。 ##...

    ASP.NET+jquery实现AJAX滚动滚动条加载数据的下拉列表控件

    在本示例中,我们将讨论如何结合jQuery和AJAX技术,实现在ASP.NET环境中,当用户滚动滚动条时,下拉列表控件自动加载更多数据的功能。 jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。在...

    一个用jquery写的判断div滚动条到底部的方法【推荐】

    在jQuery中,处理div元素的滚动事件是一项常见的需求,特别是在实现无限滚动或加载更多内容时。...通过本文的示例,你应该能够掌握如何用jQuery判断div滚动条是否到底部,并将其应用于自己的项目中。

    jquery scrollpagination实现的前台数据滚动加载,费了很大劲啊

    综上所述,jQuery ScrollPagination插件通过监听滚动事件,实现在用户滚动到底部时自动加载更多数据,极大地提升了用户体验。通过合理配置和定制,你可以轻松地将其应用于自己的项目中,无论数据源来自哪里,只要能...

    瀑布流效果 滚动到底部加载更多

    总结,这个示例展示了如何结合JavaScript和jQuery实现瀑布流布局以及滚动到底部加载更多的功能。通过合理的HTML结构、CSS样式和JavaScript逻辑,可以创建一个动态且响应式的瀑布流页面,提升用户体验,尤其适用于...

    浅析jquery如何判断滚动条滚到页面底部并执行事件

    本篇文章将深入探讨如何使用jQuery来判断滚动条是否滚动到页面底部,并在此基础上执行特定的事件。首先,我们需要了解三个关键的DOM元素属性:clientHeight、offsetHeight和scrollTop。 1. **clientHeight**: ...

    jquery 上拉加载更多

    7. **防止重复加载**:为了避免用户快速滚动时多次触发加载,可以设置一个标志变量,在加载过程中禁用滚动事件监听,加载完成后恢复。 8. **优化用户体验**:为了提高用户体验,可以添加加载提示,如显示一个加载中...

    jQuery实现的自动加载页面功能示例

    它通常应用于无限滚动列表或分页显示内容的场景,当用户滚动到页面底部时,自动加载更多的内容。以下是关于jQuery实现自动加载页面功能的知识点详解: 1. **动态加载内容**: - 在页面中,动态地向容器元素(如`...

    jquery DIV撑大让滚动条滚到最底部代码

    在探讨如何使用jQuery让DIV元素的滚动条滚动到最底部之前,我们需要了解几个基础知识点,以便更好地掌握这一操作的原理和应用背景。 首先,需要了解jQuery是什么。jQuery是一个快速、小巧、功能丰富的JavaScript库...

    jQuery页面滚动顶部进度条加载效果代码

    在这个特定的案例中,jQuery被用来监听用户的滚动事件,当用户滚动到页面的某个位置时,进度条开始显示并逐步完成,模拟数据加载的过程。 进度条加载效果通常是通过CSS样式和JavaScript配合实现的。首先,HTML中会...

    jQuery移动端下拉刷新、上拉加载更多插件

    2. **上拉加载更多**:当用户在页面底部向上拉动时,会触发加载更多数据的事件。这在处理无限滚动列表时非常有用,可以动态加载新的内容而无需用户点击加载按钮。 **三、使用步骤** 1. **引入依赖**:首先,在HTML...

    基于javascript实现浏览器滚动条快到底部时自动加载数据

    无论是使用jQuery还是原生JavaScript,核心思路都是监听滚动事件,判断滚动条位置并触发新的数据加载。在实际应用中,根据项目需求,可能还需要考虑数据分页、加载动画、错误处理等多个方面,以提供更完善的用户体验...

    jquery 实现滚动条下拉时无限加载的简单实例

    总结来说,使用jQuery实现滚动条下拉时无限加载的关键在于监听滚动事件、判断是否达到加载条件、异步请求新数据以及将新数据插入到页面中。通过这个实例,你可以了解这一机制,并在此基础上进行定制以适应你的项目...

    滚动加载jquery

    7. **防止重复加载**:为了避免用户快速滚动导致多次请求,可以设置一个标志位,如`loading = true`,在请求过程中禁用滚动事件监听,并在请求完成后再恢复。 8. **优化性能**:为了减少不必要的计算和网络请求,...

    拉动滚动条加载数据的jquery代码

    标题中的"拉动滚动条加载数据的jquery代码"指的是在网页中实现无限滚动或者叫滚动加载(Lazy Loading)的一种技术,这种技术通常用于提高用户体验,尤其是处理大数据量时,避免一次性加载所有内容导致页面加载速度变...

    jQuery检测滚动条是否到达底部

    在网页开发中,有时我们需要监听用户的滚动行为,例如在用户滚动到页面底部时加载更多内容。这在jQuery中可以通过监听滚动事件和计算滚动位置来实现。本文将详细讲解如何使用jQuery来检测滚动条是否到达底部。 首先...

Global site tag (gtag.js) - Google Analytics