html为啥没加载出来
来源：5-4 自由编程
慕函数4234673
2020-03-20 10:13:28
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>慕课网</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<div id="helper" class="helper-wrap">
<div class="container">
<img src="img/helper-loading.gif" alt="" />
<!-- <dl class="helper fl">
<dt class="helper-title">消费者保障</dt>
<dd class="helper-content">
<a href="###" target="_blank" class="helper-item">保障范围</a
><a href="###" target="_blank" class="helper-item">退货退款流程</a
><a href="###" target="_blank" class="helper-item">服务中心</a
><a href="###" target="_blank" class="helper-item">更多特色服务</a>
</dd>
</dl>
<dl class="helper fl">
<dt class="helper-title">新手上路</dt>
<dd class="helper-content">
<a href="###" target="_blank" class="helper-item">新手专区</a
><a href="###" target="_blank" class="helper-item">消费警示</a
><a href="###" target="_blank" class="helper-item">交易安全</a
><a href="###" target="_blank" class="helper-item">24小时在线帮助</a
><a href="###" target="_blank" class="helper-item">免费开店</a>
</dd>
</dl>
<dl class="helper fl">
<dt class="helper-title">付款方式</dt>
<dd class="helper-content">
<a href="###" target="_blank" class="helper-item">快捷支付</a
><a href="###" target="_blank" class="helper-item">信用卡</a
><a href="###" target="_blank" class="helper-item">余额包</a
><a href="###" target="_blank" class="helper-item">蜜蜂花啊</a
><a href="###" target="_blank" class="helper-item">货到付款</a>
</dd>
</dl>
<dl class="helper fl">
<dt class="helper-title">慕淘特色</dt>
<dd class="helper-content">
<a href="###" target="_blank" class="helper-item">手机慕淘</a
><a href="###" target="_blank" class="helper-item">慕淘信</a
><a href="###" target="_blank" class="helper-item">大众评审</a
><a href="###" target="_blank" class="helper-item">B格指南</a>
</dd>
</dl> -->
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
window.jquery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')
</script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/showhide.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
<script type="text/javascript" src="js/search.js"></script>
<script type="text/javascript" src="js/move.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
<script type="text/javascript" src="js/index.js">
</script>
</body>
</html>
helpe
var $helper = $('#helper');
var $helpers=$(".helper")
var $footer = $('#footer');
helperData = [{
title: '消费者保障',
items: [
'保障范围',
'退货退款流程',
'服务中心',
'更多特色服务'
]
}, {
title: '新手上路',
items: [
'新手专区',
'消费警示',
'交易安全',
'24小时在线帮助',
'免费开店'
]
}, {
title: '付款方式',
items: [
'快捷支付',
'信用卡',
'余额包',
'蜜蜂花啊',
'货到付款'
]
}, {
title: '慕淘特色',
items: [
'手机慕淘',
'慕淘信',
'大众评审',
'B格指南'
]
}];
function lazyLoadhelp() {
var items={}
var loadedItemNum=0 //已加载0张图片
var totalItemNum=$helpers.length//获取到的总共的图片
console.log(totalItemNum)
var loadItemFn = null;
$doc.on("help-show",loadItemFn=function(e,index,elem){
if(items[index]!=="loaded"){
$doc.trigger("help-loadItem",[index,elem]) //如果没有加载，则触发slider-loadItem进行加载
}
})
$doc.on("help-loadItem",function(e,index,elem){
var html=buildHelper( helperData[index])
$elem=$(elem)
items[index]="loaded"
loadedItemNum++
console.log(index + ': loaded')
if(loadedItemNum===totalItemNum){
//全部加载完毕
$doc.trigger("help-itemsLoaded")
console.log("help-itemsLoaded")
}
setTimeout(function(){
$elem.html(html)
},1000)
$elem.show()
})
$doc.on("help-itemsLoaded",function(e){
console.log("help-itemsLoaded")
//清除事件
$doc.off("help-show",loadItemFn)
$win.off("scroll resize",timeShow)
})
}
function buildHelper (data) {
var html = '';
html += '<div class="container">';
for (var i = 0; i < data.length; i++) {
html += '<dl class="helper fl">';
html += '<dt class="helper-title">' + data[i].title + '</dt>';
html += '<dd class="helper-content">';
for (var j = 0; j < data[i].items.length; j++) {
html += '<a href="###" target="_blank" class="helper-item">' + data[i].items[j] + '</a>';
}
html += '</dd>';
html += '</dl>';
}
html += '</div>';
return html;
};
var $win=$(window)
var $doc=$(document)
function visible($elem){
return ($win.height()+$win.scrollTop()>$elem.offset().top) && ($win.scrollTop()<$elem.offset().top+$elem.height())
}
function timeShow(){
if(visible($elem)){
$doc.trigger('help-show', [0 , $helper[0]])}
}
$win.on("scroll resize",timeShow)
lazyLoadhelp()
timeShow() .helper-wrap .container {
position: relative;
z-index: 1;
height: 138px;
border-top: 1px solid #d9dde1;
}
.helper {
width: 277px;
padding: 27px 0 0 23px;
}
.helper-title {
height: 34px;
line-height: 34px;
color: #07111b;
font-size: 16px;
}
.helper-content {
line-height: 24px;
}
.helper-item {
display: inline-block;
margin-right: 23px;
color: #93999f;
}
.helper-item:hover {
color: #f01414;
}
/*footer*/
.footer {
height: 102px;
background-color: #f3f5f7;
color: #787d82;
text-align: center;
}
.footer .container {
position: relative;
z-index: 1;
}
.footer-link-wrap {
padding-top: 33px;
margin-bottom: 12px;
}
.footer-link {
margin-right: 16px;
color: #787d82;
}
.footer-link:hover {
color: #07111b;
}写回答
2回答
-
好帮手慕星星
2020-03-20
同学你好，自己能够找到问题并解决是很棒的哦！
继续加油~
0 -
慕函数4234673
提问者
2020-03-20
老师我知道原因了，一个传的参数不对，应该传的是helperdata,第二就是length的对象错误
0
相似问题