根据后台加载数据,添加loading动画

时间:2023-02-24 23:16:35

<script>
var current = 0;
var hit = @hits;
$(this).scroll(function(){
var viewHeight =$(this).height();//可见高度
var contentHeight =$(".search_content").get(0).scrollHeight;//内容高度
var scrollHeight =$(this).scrollTop();//滚动高度

if(contentHeight - viewHeight < scrollHeight) {
if(current<hit)
{
$(".loading").css("display","block");
$.ajax({
url: "",
data:{
SearchKey:"",
current:current+15
},
async:true,
success: function(result){
var strhtml ="";
for (item in result.data)
{
strhtml += " <div class='info'>";
if (result.data[item].TitleFormat!="")
{
strhtml += " <a href='' target='_blank' class='ifone'>" +  + "</a>";
}
else {
strhtml += " <a href='' target='_blank' class='ifone'>" +  + "</a>";
}
strhtml += " <div class='oneimg'>";
strhtml += " <img src='/Content/img/searchBg.png' class='img-responsive' />";
strhtml += " </div>";
strhtml += " <div class='infobtm'>";
strhtml += " <span></span>";
strhtml += " <span>"+ result.data[item].PublishTime +"</span>";
strhtml += " <span></span>";
strhtml += " </div>";
strhtml += " </div>";
}

$(".search_content").append(strhtml);

}});
}else{
$(".loading").html("已经到底部了...");
}

}else{
$(".loading").css("display","none");
}
});

var contentif = $('div').is('.search_content');   //判断是否含有该类
if(contentif == true){
$(".loading").css("display","none");
}else{
$(".loading").addClass("loadingnoinfo");
$(".loading img").css("display","none");
$(".loading").html("没有搜索到内容 ...");
}

</script>

根据后台加载数据,添加loading动画的更多相关文章

  1. Android应用程序后台加载数据

    从ContentProvider查询你需要显示的数据是比较耗时的.如果你在Activity中直接执行查询的操作,那么有可能导致Activity出现ANR的错误.即使没有发生ANR,用户也容易感知到一个 ...

  2. HighCharts 后台加载数据的时候去掉默认的 series

    var chart; var options = { chart: { renderTo: 'container', type:'line' }, title: { text: '历史趋势时序图', ...

  3. MVC中使用Echart后台加载数据 实现饼图、折线图、全国地图数据&comma;单击双击事件等

    @{ Layout = null; } @if (false) { <script src="~/Js/jquery-easyui-1.5/jquery.min.js"&gt ...

  4. ionic 页面加载事件及loading动画

    页面加载完成事件(非刷新情况下,页面切换是不会重复触发此事件的,只在第一次进入页面时触发,需要重复触发的话请使用 $ionicView.enter 事件) angular.module('app.co ...

  5. jQuery异步加载数据添加事件

    几个月前在一个项目中涉及到树形栏,然后看了很多插件,觉得有点麻烦,于是自己写了一个,写着写着就出问题了. 当时项目是通过树形栏进行权限控制的,管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作 ...

  6. angular5给懒加载模块添加loading

    在根组件的构造函数中直接执行: this.router.events.subscribe(event=>{ if(event instanceof RouteConfigLoadEnd) { t ...

  7. 一个等待页面加载完毕的loading动画

    1 html 部分 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" ...

  8. Android动画之仿美团加载数据等待时,小人奔跑进度动画对话框(附顺丰快递员奔跑效果)

    Android动画之仿美团加载数据等待时,小人奔跑进度动画对话框(附顺丰快递员奔跑效果) 首句依然是那句老话,你懂得! finddreams :(http://blog.csdn.net/finddr ...

  9. 当vue 页面加载数据时显示 加载loading

    参考:https://www.jianshu.com/p/104bbb01b222 Vue 页面加载数据之前增加 `loading` 动画 创建组件 1.新建 .vue 文件: src -> c ...

随机推荐

  1. CoreData教程

    网上关于CoreData的教程能搜到不少,但很多都是点到即止,真正实用的部分都没有讲到,而基本不需要的地方又讲了太多,所以我打算根据我的使用情况写这么一篇实用教程.内容将包括:创建entity.创建r ...

  2. ACM&colon; NBUT 1107 盒子游戏 - 简单博弈

     NBUT 1107  盒子游戏 Time Limit:1000MS     Memory Limit:65535KB     64bit IO Format:  Practice  Appoint ...

  3. Pyunit测试框架

    一.概述 本系列主要解决的问题是“接口自动化测试”,选择的测试语言是 python 脚本语言.截至目前为止,python是公认的最好的用于自动化应用的语言之一 二.PyUnit测试框架 使用 pyth ...

  4. poj 1847 最短路简单题,dijkstra

    1.poj  1847  Tram   最短路 2.总结:用dijkstra做的,算出a到其它各个点要改向的次数.其它应该也可以. 题意: 有点难懂.n个结点,每个点可通向ki个相邻点,默认指向第一个 ...

  5. 【Spring】利用Spring最简单地使用异步方法

    有时候我们想异步地调用某个方法. 比如这个场景:在业务处理完毕后,需给用户发送通知邮件.由于邮件发送需调用邮箱服务商,有可能发生阻塞,我们就可以异步调用.当然有个前提,即如果邮件发送失败,不需要提示用 ...

  6. LetterView实现载入全国各地城市

    近期更具eoe论坛上的letteView案例(   eoe)自己做了一个LetterView载入全国城市的案例,欢迎大家互相学习和交流, 相对于eoe那个案例稍微修改了一下,利用json存储全国城市数 ...

  7. DISC免费性格测试题

    现在给大家推荐一款世界500强和猎头公司招聘人才时用的DISC性格测评,用在找对象方面也比较合适.大家不妨看下自己的性格,就知道该找什么样的意中人啦--- 在每一个大标题中的四个选择题中只选择一个最符 ...

  8. MongoDB Java 连接配置

    [前言] 由于处于线程安全等考虑,MongoDBJava从3.0开始已经打算废弃DB开头的类的使用,所以整体调用上有了较大的区别,特以此文志之 [正文] 环境配置 在Java程序中如果要使用Mongo ...

  9. PropertyGrid--基本功能

    一.引言 PropertyGrid是Visual Studio中新增的控件,顾名思义,其主要是用来显示和设置某一(或多个)对象的属性值的.其具体的实现主要是基于.Net中强大的反射机制.Propert ...

  10. 【编程练习】收集的一些c&plus;&plus;代码片,算法排序,读文件,写日志,快速求积分等等

    写日志: class LogFile { public: static LogFile &instance(); operator FILE *() const { return m_file ...