老师帮忙看下，有时加载不出来，有时刷新只能加载出来第一个

来源：5-4 自由编程

技术为王2383098363

2019-08-31 14:00:07

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="other_content">
<div class="container">
<img src="img/loading.gif" alt="">
</div>
</div>
<div class="foot_nav">
<div class="container clear">
<img src="img/loading.gif" alt="">
<!-- <div class="nav_content">
<p class="a=nav_title">消费者保障</p>
<a href="javascript:;">保障范围</a>
<a href="javascript:;">退换货流程</a>
<a href="javascript:;">服务中心</a>
<a href="javascript:;">更多特色服务</a>
</div>
<div class="nav_content">
<p class="a=nav_title">新手上路</p>
<a href="javascript:;">新手专区</a>
<a href="javascript:;">消费警示</a>
<a href="javascript:;">交易安全</a>
<a href="javascript:;">24小时在线帮助</a>
<a href="javascript:;">免费开店</a>
</div>
<div class="nav_content">
<p class="a=nav_title">付款方式</p>
<a href="javascript:;">快捷支付</a>
<a href="javascript:;">信用卡</a>
<a href="javascript:;">余额包</a>
<a href="javascript:;">蜂蜜花啊</a>
<a href="javascript:;">货到付款</a>
</div>
<div class="nav_content">
<p class="a=nav_title">慕淘特色</p>
<a href="javascript:;">手机慕淘</a>
<a href="javascript:;">慕淘信</a>
<a href="javascript:;">大众评审</a>
<a href="javascript:;">B格指南</a>
</div> -->
</div>
</div>
<div class="foot">
<div class="container">
<img src="img/loading.gif" alt="">
<!-- <div class="tags">
<a href="javascript:;">关于慕淘</a>
<a href="javascript:;">合作伙伴</a>
<a href="javascript:;">营销中心</a>
<a href="javascript:;">廉正举报</a>
<a href="javascript:;">联系客服</a>
<a href="javascript:;">开放平台</a>
<a href="javascript:;">诚征英才</a>
<a href="javascript:;">联系我们</a>
<a href="javascript:;">网站地图</a>
<a href="javascript:;">法律声明</a>
<a href="javascript:;">知识产权</a>
</div>
<div class="copyright">&copy;2017 imooc.com All Rights Reserved</div> -->
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>

</body>
</html>

/*通用*/
*{
	padding: 0;
	margin: 0;
}

a{
	text-decoration: none;
}

.container{
	width: 1200px;
	margin:0 auto;
}
/*页面其他内容*/

.other_content .container{
	height: 800px;	
}
.other_content .container img,.foot_nav .container img,.foot .container img{
	display: block;
	margin:0 auto;
	top: 370px;
    position: relative;
}
.foot .container img{
	top: -6px;
}
.foot_nav .container img{
	top: 0px;
}
/*页面底部导航区*/
.foot_nav .container{
	border-top: 1px solid #D8DDE1;
}
.nav_content{
	padding: 30px 0px 30px 22px;
	width: 278px;
	height:78px;
	float: left;
}
.nav_content p{
	font-size: 16px;
	line-height: 30px;
	color: #05111C;
}
.nav_content a{
	font-size: 12px;
	line-height: 24px;
	color: #9299A0;
	margin-right:22px;
	display: inline-block;
	float: left;
}
.nav_content a:hover{
	color: #F01513;
}
.clear::after{
	display: block;
	content: '';
	clear: both;
}
/*页脚*/
.foot{
	background: #F3F5F7;	
}
.foot .container{
	height: 102px;
}
.foot .container .tags,.copyright{
	top: 27px;
	text-align: center;
	position: relative;
}

.foot .container .tags a,.copyright{
	font-size: 12px;
	line-height: 24px;
	color: #777D82;
	margin-right:16px;
}
.foot .container .tags a:hover{
	color: #000;
}

var bottomData=[
	{
		'title':'消费者保障',
		'items':['保障范围','退换货流程','服务中心','更多特色服务']
	},{
		'title':'新手上路',
		'items':['新手专区','消费警示','交易安全','24小时在线帮助','免费开店']
	},{
		'title':'付款方式',
		'items':['快捷支付','信用卡','余额包','蜂蜜花啊','货到付款']
	},{
		'title':'慕淘特色',
		'items':['手机慕淘','慕淘信','大众评审','B格指南']
	}
]

var footData={
	'link':['关于慕淘','合作伙伴','营销中心','廉正举报','联系客服','开放平台','诚征英才','联系我们','网站地图','法律声明','知识产权'],
	'copyright':'&copy;2017 imooc.com All Rights Reserved'
}
	

function footHtml(){
	var html='<div class="tags">';

	for (var i = 0; i < footData['link'].length; i++) {
		html+='<a href="javascript:;">'+footData['link'][i]+'</a>';
	}
	html+='</div><div class="copyright">'+footData['copyright']+'</div>'
	return html;
}

function footNavHtml(){
	var html='';

	for (var i = 0; i < bottomData.length; i++) {
		
		html+='<div class="nav_content"><p class="a=nav_title">'+bottomData[i]['title']+'</p>';
	    for (var j = 0; j < bottomData[i]['items'].length; j++) {
		html+='<a href="javascript:;">'+bottomData[i]['items'][j]+'</a>'
		}
		html+='</div>'
	}
	return html;
}

function isVisible($elem){
	return ($(window).height()+$(window).scrollTop()>$elem.offset().top) && ($elem.offset().top+$elem.height()>$(window).scrollTop())
}

var download={};

function timeToShow($elem,callback){
	if (download[$elem]=='loaded') {
		$(window).off('scoll resize',timeToShow($elem,callback));
		return;
	};

	if (isVisible($elem)) {
		$elem.find('.container').html(callback())
		download[$elem]='loaded';
	};
}

$(window).on('scroll resize',timeToShow($('.foot_nav'),footNavHtml))
$(window).on('scroll resize',timeToShow($('.foot'),footHtml))

timeToShow($('.foot_nav'),footNavHtml);
timeToShow($('.foot'),footHtml)

写回答

1回答