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;//保存用户最初的优惠劵信息
    
  • 相关阅读:
    循环
    pl/sql小结
    poi编程
    Activiti工作流面试相关知识!
    工作流学习——Activiti流程变量五步曲
    工作流学习——Activiti流程实例、任务管理四步曲
    工作流学习——Activiti流程定义管理三步曲
    工作流学习——Activiti整体认识二步曲
    工作流学习——重要概念扫盲篇一步曲
    Activiti工作流数据库表详细介绍(23张表)
  • 原文地址:https://www.cnblogs.com/Alight/p/2992873.html
Copyright © 2011-2022 走看看