<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://login.cnki.net/TopLoginNew/scripts/jquery-1.11.3.min.js"></script>
<title>Document</title>
<style>
.box {
display: none;
width: 400px;
height: 500px;
border: 1px solid #000;
margin: 30px 0;
}
.show {
display: block;
}
</style>
</head>
<body>
<div id="main">
<div class="box show" id="zzgzly">
<div>标题1</div>
<span>内容</span>
</div>
<div class="box" id="zzwx">
<div>标题2</div>
<span>内容</span>
</div>
<div class="box" id="zzds">
<div>标题3</div>
<span>内容</span>
</div>
<div class="box" id="hzzz">
<div>标题4</div>
<span>内容</span>
</div>
<div class="box" id="zzz">
<div>标题5</div>
<span>内容</span>
</div>
</div>
<script>
$(function () {
var lazyLoadArr = [
{
id: "kcms-data-quoted-corefirerecomend",
isRequest: false,
fun: "corefileRecommend",
isShow: true,
param:
"'kcms-data-quoted-corefirerecomend', $(\"#paramfilename\").val()",
},
{ id: "zzgzly", isRequest: false, fun: "fun1", isShow: true },
{ id: "zzwx", isRequest: false, fun: "fun2", isShow: false },
{ id: "zzds", isRequest: false, fun: "fun3", isShow: false },
{ id: "hzzz", isRequest: false, fun: "fun4", isShow: false },
{ id: "zzz", isRequest: false, fun: "fun5", isShow: false },
];
var lazyLoadArr1 = [];
function scrollHandler(count) {
if (lazyLoadArr1.length == lazyLoadArr.length) {
window.removeEventListener("scroll", this.scrollHandler);
window.removeEventListener("resize", this.scrollHandler);
}
for (var i = 0; i < arr.length; i++) {
if (
lazyLoadArr[i].isShow &&
!lazyLoadArr[i].isRequest &&
$("#" + lazyLoadArr[i].id).length > 0
) {
var el = $("#" + lazyLoadArr[i].id)[0];
var topRect = el.getBoundingClientRect();
var h =
document.documentElement.clientHeight ||
document.body.clientHeight;
if (topRect.top < h) {
funCommon(i, lazyLoadArr);
lazyLoadArr1.push(lazyLoadArr[i]);
}
}
}
}
// 滚动触发
scrollHandler();
window.addEventListener(
"scroll",
throttleDebounce(scrollHandler, 300, 300)
);
window.addEventListener(
"resize",
throttleDebounce(scrollHandler, 300, 300)
);
// 公共方法
function loadCondition(i, arr) {
if (arr.length == i + 1) return;
$("#" + arr[i + 1].id)
.addClass("dis-show")
.removeClass("dis-none");
arr[i + 1].isShow = true;
scrollHandler();
}
function funCommon(i, arr) {
arr[i].isRequest = true;
// loadCondition(i);
var dtd = $.Deferred(); // 新建一个Deferred对象
var wait = function (dtd) {
var task = function () {
// 执行的方法
/*eval(func);*/
eval(arr[i].fun + "(" + arr[i].param + ",dtd)");
};
task();
return dtd;
};
$.when(wait(dtd))
.done(function () {
$lazyLoadObj.Funcs.loadCondition(i, arr);
})
.fail(function () {
$lazyLoadObj.Funcs.loadCondition(i, arr);
});
}
function fun1(dtd) {
dtd.resolve();
}
function fun2(dtd) {
dtd.resolve();
}
function fun3(dtd) {
dtd.resolve();
}
function fun4(dtd) {
dtd.resolve();
}
function fun5(dtd) {
dtd.resolve();
}
// 节流
function throttleDebounce(fn, delay, mustRunDelay) {
var timer = null;
var t_start;
return function () {
var context = this;
var args = arguments;
var t_curr = +new Date();
clearTimeout(timer);
if (!t_start) {
t_start = t_curr;
}
if (mustRunDelay != 0 && t_curr - t_start >= mustRunDelay) {
fn.apply(context, args);
t_start = t_curr;
} else {
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
}
};
}
});
</script>
<script>
// "flag" : true,
// "lazyLoadArr" : [
// { id: "kcms-data-quoted-corefirerecomend", isRequest: false, fun: "corefileRecommend", isShow: true,param:"'kcms-data-quoted-corefirerecomend', $(\"#paramfilename\").val()" },
// /* { id: "refpartdiv", isRequest: false, fun: "getRefCountHtml($(\"#paramfilename\").val(), \"quoted-refcountpart\",dtd)", isShow: false },*/
// { id: "refpartdiv", isRequest: false, fun: "getRefCountHtml", isShow: false,param:"$(\"#paramfilename\").val(), \"quoted-refcountpart\"" },
// { id: "nxgp-kcms-data-ref-references-journal", isRequest: false, fun: "getrefdata", isShow: false,param : "\"references\", \"JOURNAL\", $(\"#paramfilename\").val(), 1, \"nxgp-kcms-data-ref-references-journal\"" },
// /*{ id: "refpartdiv", isRequest: false, fun: "moduleTwo", isShow: false },*/
// { id: "nxgp-kcms-data-ref-references-dissertation-d", isRequest: false, fun: "getrefdata", isShow: false,param: "\"references\", \"DISSERTAION-D\", $(\"#paramfilename\").val(), 1, \"nxgp-kcms-data-ref-references-dissertation-d\"" },
// { id: "nxgp-kcms-data-ref-references-dissertation-m", isRequest: false, fun: "getrefdata", isShow: false,param: "\"references\", \"DISSERTAION-M\", $(\"#paramfilename\").val(), 1, \"nxgp-kcms-data-ref-references-dissertation-m\"" },
// { id: "nxgp-kcms-data-ref-references-conference-c", isRequest: false, fun: "getrefdata", isShow: false, param: "\"references\", \"CONFERENCE-C\", $(\"#paramfilename\").val(), 1, \"nxgp-kcms-data-ref-references-conference-c\"" },
// { id: "nxgp-kcms-data-ref-references-conference-i", isRequest: false, fun: "getrefdata", isShow: false, param: "\"references\", \"CONFERENCE-I\", $(\"#paramfilename\").val(), 1, \"nxgp-kcms-data-ref-references-conference-i\"" },
// { id: "nxgp-kcms-data-ref-references-yearbook", isRequest: false, fun: "getrefdata", isShow: false, param: "\"references\", \"YEARBOOK\", $(\"#paramfilename\").val(), 1, \"nxgp-kcms-data-ref-references-yearbook\"" },
// { id: "nxgp-kcms-data-ref-references-newpaper", isRequest: false, fun: "getrefdata", isShow: false, param: "\"references\", \"NEWSPAPER\", $(\"#paramfilename\").val(), 1, \"nxgp-kcms-data-ref-references-newpaper\"" },
// { id: "nxgp-kcms-data-ref-references-journal-w", isRequest: false, fun: "getrefdata", isShow: false, param: "\"references\", \"JOURNAL-W\", $(\"#paramfilename\").val(), 1, \"nxgp-kcms-data-ref-references-journal-w\"" },
// { id: "nxgp-kcms-data-ref-references-book", isRequest: false, fun: "getrefdata", isShow: false, param: "\"references\", \"BOOK\", $(\"#paramfilename\").val(), 1, \"nxgp-kcms-data-ref-references-book\"" },
// { id: "nxgp-kcms-data-ref-references-patent", isRequest: false, fun: "getrefdata", isShow: false, param: "\"references\", \"PATENT\", $(\"#paramfilename\").val(), 1, \"nxgp-kcms-data-ref-references-patent\"" },
// { id: "nxgp-kcms-data-ref-references-stand", isRequest: false, fun: "getrefdata", isShow: false, param: "\"references\", \"STNADARD\", $(\"#paramfilename\").val(), 1, \"nxgp-kcms-data-ref-references-stand\"" },
// { id: "nxgp-kcms-data-ref-references-crldeng", isRequest: false, fun: "getrefdata", isShow: false,param: "\"references\", \"CRLDENG\", $(\"#paramfilename\").val(), 1, \"nxgp-kcms-data-ref-references-crldeng\"" },
// { id: "literature-recommend", isRequest: false, fun: "getSimilarDataFromApi", isShow: false, param: "'kcms-data-similar', $(\"#paramfilename\").val(), $(\"#paramdbcode\").val()" },
// ],
// "lazyLoadArr1" : [],
// "refPartTabs" : "references", //确定是引文网络点击的哪个tab
// "refPartCheckArr" : [], //每次切换tab之后定义的数据放里面，每次都要加上相关推荐的id，才能移出监听，点击切换tab之后再重新监听
// "refPartCheckArr1" : [], //每次切换tab之后都要清空，然后再将请求过的isrequst为true的放里面
// "refPartTabArrs" : [
// { type: "citations", data: []}, //引证文献
// { type: "co-references", data: []}, //共引文献
// { type: "co-citations", data: []}, //同被引文献
// { type: "second-references", data: [] }, //二级参考文献
// { type: "second-citations", data: []}, //二级引证文献
// ],
// "loadRefIndexObj" : {
// 'references':0,
// 'citations':0,
// 'co-references':0,
// 'co-citations':0,
// 'second-references':0,
// 'second-citations':0
// }
// /*-----------这里加要定义的数据*/
// // 如果是当前页签且值的length为0 再定义，长度不为0时候要放到这里面refPartCheckArr，然后再追加一条相关推荐
// refPartCheckArr1=[];
// for(var r = 0; r < $lazyLoadObj.Data.refPartTabArrs.length; r++){
// if(reftype === $lazyLoadObj.Data.refPartTabArrs[r].type){
// if($lazyLoadObj.Data.refPartTabArrs[r].data.length == 0){
// for (var i = 0; i < $("#" + div + ">div").length; i++) {
// var refTtems = {
// id:$("#" + div + ">div").eq(i).attr('id'),
// isRequest: false,
// fun: "getrefdata",
// isShow: i == 0 ? true : false,
// param: "'" + reftype + "', '"+$($("#" + div + ">div")[i]).attr("type")+"', '"+filename+"', 1, '"+$("#" + div + ">div").eq(i).attr('id')+"'"
// }
// $lazyLoadObj.Data.refPartTabArrs[r].data.push(refTtems)
// }
// for(var j=($lazyLoadObj.Data.lazyLoadArr.length-1);j<$lazyLoadObj.Data.lazyLoadArr.length;j--){
// if($lazyLoadObj.Data.lazyLoadArr[j].id === 'literature-recommend'){
// $lazyLoadObj.Data.refPartTabArrs[r].data.push($lazyLoadObj.Data.lazyLoadArr[j])
// break;
// }
// }
// }else{
// // 已有数组
// for(var t=0; t < $lazyLoadObj.Data.refPartTabArrs[r].data.length; t++){
// if($lazyLoadObj.Data.refPartTabArrs[r].data[t].isRequest){
// refPartCheckArr1.push($lazyLoadObj.Data.refPartTabArrs[r].data[t])
// }
// }
// }
// $lazyLoadObj.Data.refPartCheckArr = $lazyLoadObj.Data.refPartTabArrs[r].data;
// $lazyLoadObj.Funcs.scrollHandler();
// break;
// }
// }
// /*-----------*/
</script>
</body>
</html>
ajax加载到可视区懒加载 优化(方法二)
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- (NSArray*)visibleCells;UITableview的方法，这个最直接，返回一个UITablevi...
- 这个方法的主要应用是懒加载(lazyload),无限加载（infinte scroll) 基于浏览器窗口的判断 ....
