今日推荐商品图片加载不出来
来源：6-5 今日推荐商品
hyperse
2019-07-19 14:46:06
而且loading图也只显示4张
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>慕淘网</title>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="nav-site">
<div class="container cf">
<ul class="fl cf">
<li class="fl"><a href="javascript:;" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" class="nav-site-signup link">免费注册</a></li>
<li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛幕淘</a></li>
</ul>
<ul class="fr cf">
<li class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">我的慕淘<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</li>
<li class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
<li><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
</ul>
</li>
<li class="fl">
<a href="###" target="_blank" class="nav-site-category link">商品分类</a>
</li>
<li class="menu dropdown fl" data-active="menu" data-load="js/dropdown-seller.json">
<a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li class="dropdown-loading"></li>
<!--<li><a href="###" target="_blank" class="menu-item">免费开店</a></li>
<li><a href="###" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">出售中的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家服务市场</a></li>
<li><a href="###" target="_blank" class="menu-item">体验中心</a></li>-->
</ul>
</li>
<li class="nav-site-service dropdown fl menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-right">
<li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div><!-- nav-site结束 -->
<div class="header">
<div class="container">
<h1 class="fl"><a href="./index.html" class="header-logo text-hidden fl">慕课网</a></h1>
<div id="header-search" class="search fl">
<form action="https://s.taobao.com/search" class="search-form">
<input type="text" name="q" class="search-inputbox fl" placeholder="请输入搜索的内容" autocomplete="off" />
<input type="submit" value="搜索" class="search-btn fl" />
</form>
<ul class="search-layer">
<!--<li class="search-layer-item text-ellipsis">111</li>
<li class="search-layer-item text-ellipsis">222</li>
<li class="search-layer-item text-ellipsis">333</li>-->
</ul>
</div>
<div class="cart fr">
</div>
</div>
</div><!-- header结束 -->
<div class="nav-main">
<div class="container">
<a href="###" target="_blank" class="link">数码城</a
><a href="###" target="_blank" class="link">天黑黑</a
><a href="###" target="_blank" class="link">团购</a
><a href="###" target="_blank" class="link">发现</a
><a href="###" target="_blank" class="link">二手特价</a
><a href="###" target="_blank" class="link">名品汇</a>
</div>
</div><!-- nav-main结束 -->
<div class="focus">
<div class="container">
<div id="focus-category" class="category fl">
<a href="###" target="_blank" class="category-title"><i class="icon"></i>商品分类</a>
<ul class="category-list">
<li class="dropdown" data-active="category" data-load="js/category-detail-1.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">家用电器</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown category-active" data-active="category" data-load="js/category-detail-2.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">手机</a
>、<a href="###" target="_blank" class="dropdown-link">运营商</a
>、<a href="###" target="_blank" class="dropdown-link">数码</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-3.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">电脑</a
>、<a href="###" target="_blank" class="dropdown-link">办公</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-4.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">家居</a
>、<a href="###" target="_blank" class="dropdown-link">家具</a
>、<a href="###" target="_blank" class="dropdown-link">家装</a
>、<a href="###" target="_blank" class="dropdown-link">厨具</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-5.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">男装</a
>、<a href="###" target="_blank" class="dropdown-link">女装</a
>、<a href="###" target="_blank" class="dropdown-link">童装</a
>、<a href="###" target="_blank" class="dropdown-link">内衣</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-6.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">化妆</a
>、<a href="###" target="_blank" class="dropdown-link">清洁</a
>、<a href="###" target="_blank" class="dropdown-link">宠物</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-7.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">运动户外</a
>、<a href="###" target="_blank" class="dropdown-link">钟表</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-8.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">汽车</a
>、<a href="###" target="_blank" class="dropdown-link">汽车用品</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-9.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">母婴</a
>、<a href="###" target="_blank" class="dropdown-link">玩具乐器</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-10.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">食品</a
>、<a href="###" target="_blank" class="dropdown-link">酒类</a
>、<a href="###" target="_blank" class="dropdown-link">生鲜</a
>、<a href="###" target="_blank" class="dropdown-link">特产</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-11.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">医药保健</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-12.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">图书</a
>、<a href="###" target="_blank" class="dropdown-link">音像</a
>、<a href="###" target="_blank" class="dropdown-link">电子书</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-13.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">彩票</a
>、<a href="###" target="_blank" class="dropdown-link">旅行</a
>、<a href="###" target="_blank" class="dropdown-link">充值</a
>、<a href="###" target="_blank" class="dropdown-link">票务</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-14.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">理财</a
>、<a href="###" target="_blank" class="dropdown-link">众筹</a
>、<a href="###" target="_blank" class="dropdown-link">白条</a
>、<a href="###" target="_blank" class="dropdown-link">保险</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
</ul>
</div><!-- focus-category结束 -->
<div id="focus-slider" class="slider fl">
<div class="slider-container">
<div class="slider-item">
<a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/1.png" alt="" class="slider-img"/></a>
</div>
<div class="slider-item">
<a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/2.png" alt="" class="slider-img"/></a>
</div>
<div class="slider-item">
<a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/3.png" alt="" class="slider-img"/></a>
</div>
<div class="slider-item">
<a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/4.png" alt="" class="slider-img"/></a>
</div>
</div>
<ol class="slider-indicator-wrap">
<li class="slider-indicator text-hidden fl">1</li>
<li class="slider-indicator text-hidden fl">2</li>
<li class="slider-indicator text-hidden fl">3</li>
<li class="slider-indicator text-hidden fl">4</li>
</ol>
<a href="javascript:;" class="slider-control slider-control-left"><</a>
<a href="javascript:;" class="slider-control slider-control-right">></a>
</div><!-- focus-slider结束 -->
<div class="focus-sidebar fr">
<div class="focus-news">
<div class="focus-news-head">
<h2 class="focus-news-title fl">慕快报</h2>
<a href="###" target="_blank" class="link fr">更多 ></a>
</div>
<div class="focus-news-body">
<p class="text-ellipsis">
<a href="###" target="_blank" class="link"><strong>[特惠]</strong>精选图书每满150减50</a>
</p>
<p class="text-ellipsis">
<a href="###" target="_blank" class="link"><strong>[特惠]</strong>精选图书每满150减50</a>
</p>
<p class="text-ellipsis">
<a href="###" target="_blank" class="link"><strong>[特惠]</strong>精选图书每满150减50</a>
</p>
<p class="text-ellipsis">
<a href="###" target="_blank" class="link"><strong>[特惠]</strong>精选图书每满150减50</a>
</p>
<p class="text-ellipsis">
<a href="###" target="_blank" class="link"><strong>[特惠]</strong>精选图书每满150减50</a>
</p>
</div>
</div><!-- focus-news结束 -->
<div class="focus-service cf">
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">机票</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
</div><!-- focus-service结束 -->
<div class="focus-ad">
</div>
</div><!-- focus-sidebar结束 -->
</div><!-- container结束 -->
</div><!-- focus结束 -->
<div class="todays">
<div class="container">
<div id="todays-slider" class="slider">
<div class="slider-container">
<div class="slider-item">
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/1.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/2.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/3.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/4.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/5.png" alt="" class="slider-img"/></a>
</div>
<div class="slider-item">
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/6.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/7.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/8.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/9.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/10.png" alt="" class="slider-img"/></a>
</div>
<div class="slider-item">
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/11.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/1.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/2.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/3.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/4.png" alt="" class="slider-img"/></a>
</div>
</div>
<a href="javascript:;" class="slider-control slider-control-left"><</a>
<a href="javascript:;" class="slider-control slider-control-right">></a>
</div>
</div><!-- container结束 -->
</div><!-- todays结束 -->
</body>
<!--<script src="js/jquery.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>-->
<script>
window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
</script>
<script src="js/transition.js"></script>
<script src="js/showHide.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/search.js"></script>
<script src="js/move.js"></script>
<script src="js/slider.js"></script>
<script src="js/index.js"></script>
</html>
/* 仅适用于首页的样式 */
/* nav-site站点导航样式 */
.nav-site{
width:100%;
background-color: #f3f5f7;
}
.nav-site .container{
height: 44px;
line-height: 44px;
border-bottom: 1px solid #cdd0d4;
}
.nav-site-login{
color: #f01414;
margin-left: 15px;
}
.nav-site-signup,
.nav-site-mobile{
margin-left: 10px;
}
.nav-site-category{
margin: 0 10px;
}
.nav-site-service{
margin-right: 15px;
}
/* dropdown样式 */
/*.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index: 2;
display: block;
height: 100%;
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.dropdown-arrow{
display: inline-block;
width: 8px;
height: 6px;
background: url(../img/dropdown-arrow.png) no-repeat;
margin-left: 8px;
vertical-align: middle;
}
.dropdown-layer{
display: none;
position: absolute;
z-index: 1;
top: 43px;
background: #ffffff;
border: 1px solid #cdd0d4;
}
.dropdown-left{
left: 0;
right: auto;
}
.dropdown-right{
right: 0;
left: auto;
}
.dropdown-item{
display: block;
height: 30px;
line-height: 30px;
padding: 0 12px;
color: #4d555d;
white-space: nowrap;
}
.dropdown-item:hover{
background-color: #f3f5f7;
}*/
/*.dropdown-active .dropdown-toggle{
background-color: #fff;
border-color: #cdd0d4;
}
.dropdown-active .dropdown-arrow{
background-image:url(../img/dropdown-arrow-active.png);
}
.dropdown-active .dropdown-layer{
display:block ;
}*/
.dropdown:hover
.dropdown-active .dropdown-toggle,
.dropdown:hover .dropdown-toggle{
background-color: #FFFFFF;
border-color: #cdd0d4;
}
.dropdown-active .dropdown-arrow,
.dropdown:hover .dropdown-arrow{
/*background-image:url(../img/dropdown-arrow-active.png);*/
transform: rotate(180deg);
transition: all 1s;
}
.dropdown-active .dropdown-layer,
.dropdown:hover .dropdown-layer{
display: block;
}
/* header */
.header{
width: 100%;
height: 124px;
background-color: #f3f5f7;
}
.header-logo,
.header .search,
.header .cart{
margin-top: 36px;
}
.header-logo{
display: block;
width: 136px;
height: 48px;
background: url(../img/header-logo.png) no-repeat;
margin-left: 15px;
}
.header .search{
margin-left: 145px;
}
/* nav-main */
.nav-main{
width: 100%;
height: 48px;
background-color: #07111b;
margin-bottom: 8px;
text-indent: 182px;
}
.nav-main .link{
margin-left: 50px;
color: #FFFFFF;
font-size: 14px;
line-height: 48px;
}
/* focus */
.focus{
width: 100%;
height: 504px;
background-color: #FFFFFF;
margin-bottom: 8px;
}
.focus-sidebar{
width: 249px;
}
.focus-news{
padding: 7px 20px 12px;
background-color: #FFFFFF;
border-bottom: none;
}
.focus-news-head{
height: 38px;
line-height: 38px;
}
.focus-news-title{
color: #F01414;
font-size: 16px;
}
.focus-news-body{
line-height: 28px;
}
.focus-service{
background-color: #FFFFFF;
border-left: 1px solid #d9dde1;
}
.focus-service-item{
width: 61px;
height: 71px;
border-top: 1px solid #d9dde1;
border-right: 1px solid #d9dde1;
text-align: center;
}
.focus-service-icon,
.focus-service-text{
display: inline-block;
width: 100%;
}
.focus-service-icon{
margin-top: 17px;
color: #f67272;
font-size: 22px;
}
.focus-service-text{
margin-top: 6px;
color: #4d555d;
}
.focus-ad{
width: 100%;
height: 90px;
background: url(../img/focus-ad.png) no-repeat;
}
.focus .slider{
margin-left: 8px;
}
/* todays */
.todays .slider{
width: 100%;
height: 158px;
}
.todays .slider-img{
width: 240px;
}
(function($){
'use strict';
//menu
$('.menu').on('dropdown-show',function(e){
loadOnce($(this),buildMenuItem);
});
$('.menu').dropdown({
css3:true,
js:false
});
function buildMenuItem($elem,data){
var html = '';
if(data.length === 0) return;
for(var i=0;i<data.length;i++){
html += '<li><a href="' +data[i].url+ '" target="_blank" class="menu-item">' + data[i].name + '</a></li>';
}
$elem.find('.dropdown-layer').html(html);
}
//header search
var $headerSearch = $('#header-search');
$headerSearch.on('search-getData',function(e,data){
console.log(e.type);
console.log(data);
}).on('search-noData',function(e){
console.log(e.type);
});
$headerSearch.search({
autocomplete:true,
css3:false,
js:false,
animation:'fade'
});
//header search
var $headerSearch = $('#header-search');
var html = '',
maxNum = 10;
$headerSearch.on('search-getData',function(e,data){
/*var html = '',
dataNum = data['result'].length,
maxNum = 10;*/
var $this = $(this);
html = createHeaderSearchLayer(data,maxNum);
$this.search('appendLayer',html);
if(html){
$this.search('showLayer');
}else{
$this.search('hideLayer');
}
}).on('search-noData',function(e){
$(this).search('hideLayer').search('appendLayer','');
}).on('click','.search-layer-item',function(){
// $input.val(removeHtmlTags($(this).html()));
$headerSearch.search('setInputVal',$(this).html());
$headerSearch.search('submit');
});
$headerSearch.search({
autocomplete:true,
css3:false,
js:false,
animation:'fade',
getDataInterval:200
});
function createHeaderSearchLayer(data,maxNum){
var html = '',
dataNum = data['result'].length;
if(dataNum === 0){
return '';
}
for(var i = 0;i < dataNum;i++){
if(i >= maxNum) break;
html += '<li class="search-layer-item text-ellipsis">' + data['result'][i][0] + '</li>';
}
return html;
}
//focus-category分类样式
$('#focus-category').find('.dropdown')
.on('dropdown-show',function(){
loadOnce($(this),createCategoryDetails);
})
.dropdown({
css3:false,
js:false
});
function createCategoryDetails($elem,data){
var html = '';
for(var i= 0;i< data.length;i++){
html += '<dl class="category-details cf"><dt class="category-details-title fl"><a href="###" target="_blank" class="category-details-title-link">'+ data[i].title + '</a></dt><dd class="category-details-item fl">';
for(var j=0;j<data[i].items.length;j++){
html += '<a href="###" target="_blank" class="link">' + data[i].items[j] + '</a>';
}
html += '</dd></dl>';
}
$elem.find('.dropdown-layer').html(html);
}
//公共的
function loadOnce($elem,success){
var dataLoad = $elem.data('load');
if(!dataLoad) return;
if(!$elem.data('loaded')){
$elem.data('loaded',true);
$.getJSON(dataLoad,function(data){
if(typeof success === 'function') success($elem,data);
}).fail(function(){
$elem.data('loaded',false);
});
}
}
//focus-slider
var $focusSlider = $('#focus-slider');
$focusSlider.items = {};
$focusSlider.loadedItemNum = 0; //表示目前加载了几张
$focusSlider.totalItemNum = $focusSlider.find('.slider-img').length; //有几张待加载
//除了包装函数外，利用自定义事件：
$focusSlider.on('slider-show',$focusSlider.loadItem = function(e,index,elem){
console.log(1);
if($focusSlider.items[index] !== 'loaded'){
//1.判断没有加载后，触发加载事件
$focusSlider.trigger('slider-loadItem',[index,elem]);
}
});
//2.监听loadItem事件：
$focusSlider.on('slider-loadItem',function(e,index,elem){
//按需加载
var $img = $(elem).find('.slider-img');
loadImg($img.data('src'),function(url){
$img.attr('src',url);
$focusSlider.items[index] = 'loaded';
$focusSlider.loadedItemNum++;
console.log(index + ':loaded');
if($focusSlider.loadedItemNum === $focusSlider.totalItemNum){
//触发一个全部加载完毕的消息，发送出去
$focusSlider.trigger('slider-itemsLoaded');
}
},function(url){
//多加载一次
//显示备用图片
$img.attr('src','../img/focus-slider/placeholder.png');
});
});
//3.清除事件
$focusSlider.on('slider-itemsLoaded',function(e){
console.log('itemsLoaded');
$focusSlider.off('slider-show',$focusSlider.loadItem);
})
function loadImg(url,imgLoaded){
var image = new Image();
image.onerror = function(){
if(typeof imgFailed === 'function') imgFailed(url);
};
image.onload = function(){
if(typeof imgLoaded === 'function') imgLoaded(url);
};
//image.src = url;
setTimeout(function(){
image.src = url;
},1000);
}
$focusSlider.slider({
css3:true,
js:false,
animation:'fade', //slide
activeIndex:0,
interval:2000
// loop:true // 是否首尾相连
});
//todays-slider
var $todaysSlider = $('#focus-slider');
$todaysSlider.items = {};
$todaysSlider.loadedItemNum = 0; //表示目前加载了几张
$todaysSlider.totalItemNum = $todaysSlider.find('.slider-img').length; //有几张待加载
//除了包装函数外，利用自定义事件：
$todaysSlider.on('slider-show',$todaysSlider.loadItem = function(e,index,elem){
console.log(1);
if($todaysSlider.items[index] !== 'loaded'){
//1.判断没有加载后，触发加载事件
$todaysSlider.trigger('slider-loadItem',[index,elem]);
}
});
//2.监听loadItem事件：
$todaysSlider.on('slider-loadItem',function(e,index,elem){
//按需加载
var $imgs = $(elem).find('.slider-img');
$imgs.each(function(_,el){
var $img = $(el);
loadImg($img.data('src'),function(url){
$img.attr('src',url);
$todaysSlider.items[index] = 'loaded';
$todaysSlider.loadedItemNum++;
console.log(index + ':loaded');
if($todaysSlider.loadedItemNum === $todaysSlider.totalItemNum){
//触发一个全部加载完毕的消息，发送出去
$todaysSlider.trigger('slider-itemsLoaded');
}
},function(url){
//多加载一次
//显示备用图片
$img.attr('src','../img/focus-slider/placeholder.png');
});
});
});
//3.清除事件
$todaysSlider.on('slider-itemsLoaded',function(e){
console.log('itemsLoaded');
$todaysSlider.off('slider-show',$todaysSlider.loadItem);
})
$todaysSlider.slider({
css3:true,
js:false,
animation:'slide',
activeIndex:0,
interval:2000
// loop:true // 是否首尾相连
});
})(jQuery);
2回答
-
好帮手慕星星
2019-07-19
css是你粘贴的代码中设置今日推荐样式的地方：
js也是你粘贴的代码，今日推荐代码开始的地方：
自己可以再找一下。
0 -
好帮手慕星星
2019-07-19
同学你好，
1、loading图片最后一张换行显示了：
把.slider中设置的overflow:hidden;超出隐藏演示去掉就可以看到了。
换行显示是因为a与img都是内联元素，有文字特性，默认存在间隙，所以最后一个会换行，可以给a设置浮动，将img设置为块元素，如下：
2、图片加载不出来是因为获取的元素错了：
修改之后就对了，要细心哦。
祝学习愉快！
0h019-07-19
相似问题