zoukankan      html  css  js  c++  java
  • js中的延迟加载

    以京东订单中优惠券获取为例:

    第一次加载时不显示,点击触发时会显示:

    当第一次点击 时会加载优惠券的信息,第二次点击则不再加载,加载后结果为:

    点击的js如下:

    //----------------------------优惠券--------------------------
    function showTicket() {
        if (g('part_ticket').style.display == 'none') {
            g('part_ticket').style.display = '';
            if ($("#couponsArea").html() == null || $("#couponsArea").html() == "") { //通过判断内容是否为null或未空来控制是否加载
                queryCoupons();
            }
        } else {
            g('part_ticket').style.display = 'none';
        }
        setCouponStateShow();
    }
    

     加载js如下:

    function queryCoupons(flag) {
        //第一次查询优惠券列表时,显示"正在获取优惠卷,请等待",以后每次操作优惠券,都都不显示"正在获取优惠卷,请等待"
        if (flag != 1) {
            $("#couponsArea").html("<span class='waitInfo' id='waitInfo'>正在获取优惠卷,请等待!</span>");
        }
        $.getJSON(PurchaseAppConfig.OrderDomain + "/queryCoupons.action?rt=" + Math.random(), function (result) {
            if (result != null) {
                if (result.error != null && result.error != "") {
                    if (result.error == "NoCart") {
                        goCart();
                        return;
                    }
                }
            }
            coupons = result;//保存起来,后面使用或取消优惠劵使用
            var param = processResult(result);
            var data = TrimPath.processDOMTemplate("couponsData", param);
            $("#couponsArea").html(data);
            addLimitInfo();
            $.getJSON(PurchaseAppConfig.OrderDomain + "/checkUseCouponPwd.action?rt=" + Math.random(), function (result) {
                if (result.checkJingDongLpkSafe == false)
                    jingDongLpkNoUse(jingSafeType);
            });
            $.getJSON(PurchaseAppConfig.OrderDomain + "/checkUseDongCouponPwd.action?rt=" + Math.random(), function (result) {
                if (result.checkJingDongLpkSafe == false)
                    jingDongLpkNoUse(dongSafeType);
            });
        });
    }
    var coupons;//保存用户最初的优惠劵信息
    
  • 相关阅读:
    Hadoop Yarn 框架原理及运作机制及与MapReduce比较
    模型驱动与属性驱动区别
    spark伪分布式的安装
    大数据集群的常见问题
    linux常用命令
    大数据集群ssh登录其他机器失败 RSA host key for zb03 has changed and you have requested strict checking. Host key verification failed.
    Python 地点转化为经纬度
    Hbase原理、基本概念、基本架构
    struts2的java.lang.NoSuchMethodException错误
    抽象工厂
  • 原文地址:https://www.cnblogs.com/Alight/p/2992873.html
Copyright © 2011-2022 走看看