js中的延迟加载_js延迟加载有什么好处-CSDN博客

转自http://www.cnblogs.com/Alight/

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

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

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

点击的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;//保存用户最初的优惠劵信息

posted @ 2013-04-01 10:28 一束光阅读(0) 评论(0) 编辑

关于样式加载顺序，js加载顺序

对于大型网站，样式表，js文件有多个，这时加载顺序有讲究：

以京东为例：

对于js：

先加载全局配置，然后加载当前页面配置

先加载base-v1.js, 再加载当前页面配置 window.pageConfig = {...} (为啥要把pageConfig定义为一个属性，而不是单独定义一个变量，因为如果用一个未定义的属性时会ie下回报错，而用一个未定义的变量时不报，firefox都会报错）

当然，今天把base-v1.js放到了后面，我感觉放到前面更好些

对于css：

先加载全局样式表base.css，然后加载当前页面样式pshow.css

这样做的好处是，先加载全局样式，初始化一些公用样式，再加载本页面样式，对公用样式有冲突的地方进行修改。

衍生：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS方法执行顺序Demo</title>
<script type="text/javascript" src="js.js" defer="defer"></script>
<script type="text/javascript">
function callBack(str){
try{
get_msg(‘ok’);
}catch(e){}
alert("OnLoad中的方法");
}
</script>
</head>

<body οnlοad="callBack();">
<script type="text/javascript">
alert("页面中的方法");
</script>
</body>
</html>

//js.js文件方法如下

function get_msg(str){
alert("js文件中方法！"+str);
}

结果提示顺序：

1.页面中的方法
2.Js文件中的方法ok(defer中延迟加载方法，会在onload事件之前执行)
3.OnLoad中的方法

Jquery版Ajax利用JSONP 跨域POST/GET传输数据研究

示例1：Ajax跨域POST/GET传输数据是一个令人纠结的问题

上次合肥网遇到一个专题九涉及到了ajax跨域问题，本身来说，基于安全考虑防止进行跨域调用是没错的

但是技术的这东最不好说了，哎，，，还是想办法突破吧，

最简单的方法不外乎框架，方法也很多，下面使用jquery的JSONP来做：

jQuery中常用getJSON来调用并获取远程的JSON字符串，将其转换为JSON对象，如果成功，则执行回调函数。原型如下：

jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据。
url: 发送请求的地址

data : (可选) 待发送key/value参数

callback: (可选) 载入成功时的回调函数

主要用于客户端获取服务器JSON数据。

示例2：

后端:

<?php
$json_str = json_encode(array("ddd"=>"11111111"));
echo $_GET['ja'].'('.$json_str.')';
?>

前端:

$.getJSON('http://www.liushan.cn/test.php?ja=?',function (json){
alert(json);
});

示例2：

服务器脚本，返回JSON数据：

$.getJSON.php

$arr=array("name"=>"zhangsan", "age"=>20);
$jarr=json_encode($arr);
echo $jarr;

注意两点：

第一：在返回客户端之前，先用PHP函数json_encode将要返回的数据进行编码。

第二：返回到客户端用的是echo，而不是return。

下面是核心的客户端代码：

$.getJSON.html

注意一点：

由于在PHP中是用JSON编码返回值，所以此处必须用getJSON去调用PHP文件，从而获取数据。同时可以注意到，经由getJSON得到的数据已经变成了一个对象数组，可以用response.name，response.age很直观的获取返回值。

当然强大jquery还有另外一个getScript

看他的演示示例：

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){
$("#go").click(function(){
$(".block").animate( { backgroundColor: 'pink' }, 1000)
.animate( { backgroundColor: 'blue' }, 1000);
});
});