zoukankan      html  css  js  c++  java
  • 根据后台加载数据,添加loading动画

    <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>

  • 相关阅读:
    linux nat路由设置
    [auv] 模拟呼叫
    Sqlserver 导出insert插入语句
    函数name属性
    学习前端,应该选择哪些书籍来看?(转)
    JavaScript继承学习笔记
    Web响应式网站
    Javascript 异步加载详解(转)
    使用 nodeinspector 调试 Node.js
    用 JavaScript 检测 CPU 占比(转)
  • 原文地址:https://www.cnblogs.com/quitpoison/p/9272194.html
Copyright © 2011-2022 走看看