利用AJAX跨域,实现调取腾讯的json数据;

HTML+JavaScript代码如下(引入了zepto):

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta charset="UTF-8">
<title>AJAX跨域+移动端延迟下载</title>
<link rel="stylesheet" href="css/new.css"/>
</head>
<body>
<div class="con">
<ul>
<!--最终的HTML结构;
<li>
<div class='imgAre' trueImg=''></div>
<div class='textAre'>
<p></p>
<p></p>
</div>
</li>
-->
</ul>
<!--跨域得到数据newsList结构如下-->
<!--
id: "SPO2015072602021500",
uinnick: "腾讯新闻",
uinname: "news_news_sports",
title: "温情!恒大球迷第29分钟喊郜林",
surl: "http://view.inews.qq.com/a/SPO2015072602021500",
short_url: "",
weiboid: "",
commentid: "1175344346",
url: "http://view.inews.qq.com/a/SPO2015072602021500",
time: "2015-07-26 20:44:51",
articletype: "0",
hasVideo: 1,
imagecount: 0,
showType_video: "normal",
thumbnails_big: [ ],
thumbnails: [ ],
thumbnails_qqnews: [
"http://inews.gtimg.com/newsapp_ls/0/53866758_640330/0"
],
source: "腾讯体育",
abstract: "恒大球迷用手机点亮看台,高声呼喊力挺身披29号的郜林。"
},
-->
</div>
<div class="copyright" id="weixinShow"> <a href="#">点此查看本页面的实现原理</a> </div>
</body>
</html>
<script src="js/zepto.min.js"></script>
<script>
function kbs_sports(data) {
if (data[0] === 0) {
var newsList = data[1].idlist[0].newslist;
var frg = document.createDocumentFragment();
newsList.forEach(function (item, index) {
var oLi = document.createElement("li");
var str = "<div class='imgAre' trueImg='" + item.thumbnails_qqnews[0] + "'></div>";
str += "<div class='textAre'>";
str += "<p>" + item.title + "</p>";
str += "<p>" + item.abstract + "</p>";
str += "</div>";
oLi.innerHTML = str;
frg.appendChild(oLi);
});
$(".con ul").append(frg);
window.setTimeout(imgLoad, 500);
}
}


function imgLoad() {
var winT = getWin("clientHeight") + getWin("scrollTop");
$(".imgAre").each(function () {
if (!$(this).attr("isLoad")) {
var $t = $(this).offset().top;
var $that = $(this);
if ($t <= winT) {
var oImg = new Image;
oImg.src = $(this).attr("trueImg");
oImg.onload = function () {
$that.append(oImg);
$that.attr("isLoad", true);
}
}
}
});
}

function getWin(attr) {
return document.documentElement[attr] || document.body[attr];
}
$.ajax({
url: "http://sportswebapi.qq.com/newsApp/matchDetail?appOS=ios&mid=208_794844&width=568&height=320&callback=kbs_sports&ran=" + Math.random(),
type: "get",
dataType: "jsonp",
success: kbs_sports
});
$(document).scroll(imgLoad);
</script>

`CSS代码如下:

 

/* 防止手机触摸事件出现区块阴影 */
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
/* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */
html {-webkit-text-size-adjust: 100%; -webkit-touch-callout: none; -webkit-user-select: none;}
body, div, li, ul, p, img {margin: 0;padding: 0;font: 16px/1.5 "微软雅黑", Helvetica, sans-serif;background: #f0f0f0;}
ul, li {list-style: none;}
img {border: none;}
/*下面是延迟加载的样式表*/
.con {padding: 0 10px;}
.con li {position: relative;padding: 12px 0;border-bottom: 1px solid #ccc;}
.con li:last-child {border-bottom: none;}
.con li .imgAre {position: absolute;width: 75px;height: 60px;background: url("../img/videoPmap.png") no-repeat;background-size: 75px auto;}
.con li .imgAre img {width: 75px;height: 60px;}
.con li .textAre {margin-left: 85px;}
.con li .textAre p:nth-child(1) {height: 24px;line-height: 24px;font-weight: bold;color: #151515;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.con li .textAre p:nth-child(2) {line-height: 18px;font-size: 12px;color: #878a8d;}
/*底部的*/
.copyright{width: 100%;text-align: center;padding: 10px;background: #129f7e;}
.copyright a{color: #FFF;}

 

““