报了一个错误但是不像以前那样在控制台显示是哪个文件的第几行
该如何像以前一样显示呢?

而且楼层中第二个tab不需要缓存就显示了,第三个tab一直缓存都不显示图片,请问是代码哪里出了问题吗?
tab.js
(function($){
'use strict';
function Tab($elem,options){ //tab构造函数
this.$elem = $elem;
this.options = options;
this.$items = this.$elem.find('.tab-item');
this.$panels = this.$elem.find('.tab-panel');
this.itemNum = this.$items.length;
this.curIndex = this._getCorrectIndex(this.options.activeIndex);
this._init();
}
Tab.DEFAULTS = {
event:'mouseenter',
css3:false,
js:false,
animation:'fade',
activeIndex:0,
interval:0,
delay:0
};
Tab.prototype._init = function(){
var self = this,
timer = null;
//init show
this.$items.removeClass('tab-item-active');
this.$items.eq(this.curIndex).addClass('tab-item-active');
this.$panels.eq(this.curIndex).show();
this.$elem.trigger('tab-show',[this.curIndex,this.$panels[this.curIndex]]);
//trigger event
this.$panels.on('show shown hide hidden',function(e){
self.$elem.trigger('tab-' + e.type,[self.$panels.index(this),this]);
});
//showHide init
this.$panels.showHide(this.optitons);
//bind event
this.options.event = this.options.event === 'click' ? 'click' : 'mouseenter';
this.$elem.on(this.options.event,'.tab-item',function(){
var elem = this;
if(self.options.delay){ //delay
clearTimeout(timer);
timer = setTimeout(function(){
self.toggle(self.$items.index(elem));
},self.options.delay);
}else{ //immediate
self.toggle(self.$items.index(elem));
}
});
//auto
if(this.options.interval && !isNaN(Number(this.options.interval))){
this.$elem.hover($.proxy(this.pause,this),$.proxy(this.auto,this));
this.auto();
}
};
//获得正确索引值
Tab.prototype._getCorrectIndex = function(index){
if(isNaN(Number(index))) return 0;
if(index < 0) return this.itemNum - 1;
if(index > this.itemNum - 1) return 0;
return index;
}
//切换
Tab.prototype.toggle = function(index){
if(this.curIndex === index) return;
this.$panels.eq(this.curIndex).showHide('hide');
this.$panels.eq(index).showHide('show');
this.$items.eq(this.curIndex).removeClass('tab-item-active');
this.$items.eq(index).addClass('tab-item-active');
this.curIndex = index;
};
//自动切换
Tab.prototype.auto = function(){
var self = this;
this.intervalId = setInterval(function(){
self.toggle(self._getCorrectIndex(self.curIndex + 1));
},this.options.interval);
};
//暂停切换
Tab.prototype.pause = function(){
clearInterval(this.intervalId);
};
//注册插件(单例模式,防止多次实例化)
$.fn.extend({
tab:function(option){
return this.each(function(){
var $this = $(this),
tab = $this.data('tab'),
options = $.extend({},Tab.DEFAULTS,$this.data(),typeof option === 'object' && option);
if(!tab){ //first time
$this.data('tab',tab = new Tab($this,options));
}
if(typeof tab[option] === 'function'){
tab[option]();
}
});
}
});
})(jQuery);
index.js:
(function($){
'use strict';
//menu
var dropdown = {};
$('.menu').on('dropdown-show',function(e){
dropdown.loadOnce($(this),dropdown.buildMenuItem);
});
$('.menu').dropdown({
css3:true,
js:false
});
dropdown.buildMenuItem = function($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 search = {};
search.$headerSearch = $('#header-search');
search.$headerSearch.html = '',
search.$headerSearchmaxNum = 10;
$headerSearch.on('search-getData',function(e,data){
/*var html = '',
dataNum = data['result'].length,
maxNum = 10;*/
var $this = $(this);
search.$headerSearch.html = search.$headerSearch.createHeaderSearchLayer(data,maxNum);
$this.search('appendLayer',search.$headerSearch.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()));
search.$headerSearch.search('setInputVal',$(this).html());
search.$headerSearch.search('submit');
});
search.$headerSearch.search({
autocomplete:true,
css3:false,
js:false,
animation:'fade',
getDataInterval:200
});
search.$headerSearch.createHeaderSearchLayer = function(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(){
dropdown.loadOnce($(this),dropdown.createCategoryDetails);
})
.dropdown({
css3:false,
js:false
});
dropdown.createCategoryDetails = function($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);
}
//公共的
dropdown.loadOnce = function($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 slider = {};
slider.$focusSlider = $('#focus-slider');
slider.loadImg = function(url,imgLoaded,imgFailed){
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);
};
slider.lazyLoad = function($elem){
$elem.items = {};
$elem.loadedItemNum = 0; //表示目前加载了几张
$elem.totalItemNum = $elem.find('.slider-img').length; //有几张待加载
//除了包装函数外,利用自定义事件:
$elem.on('slider-show',$elem.loadItem = function(e,index,elem){
console.log(1);
if($elem.items[index] !== 'loaded'){
//1.判断没有加载后,触发加载事件
$elem.trigger('slider-loadItem',[index,elem]);
}
});
//2.监听loadItem事件:
$elem.on('slider-loadItem',function(e,index,elem){
//按需加载
var $imgs = $(elem).find('.slider-img');
$imgs.each(function(_,el){
var $img = $(el);
$imgs.each(function(_,el){
var $img = $(el);
slider.loadImg($img.data('src'),function(url){
$img.attr('src',url);
$elem.items[index] = 'loaded';
$elem.loadedItemNum++;
console.log(index + ':loaded');
if($elem.loadedItemNum === $elem.totalItemNum){
//触发一个全部加载完毕的消息,发送出去
$elem.trigger('slider-itemsLoaded');
}
},function(url){
//多加载一次
//显示备用图片
$img.attr('src','../img/focus-slider/placeholder.png');
});
});
});
});
//3.清除事件
$elem.on('slider-itemsLoaded',function(e){
console.log('itemsLoaded');
$elem.off('slider-show',$elem.loadItem);
})
};
slider.$focusSlider.items = {};
slider.$focusSlider.loadedItemNum = 0; //表示目前加载了几张
slider.$focusSlider.totalItemNum = slider.$focusSlider.find('.slider-img').length; //有几张待加载
//除了包装函数外,利用自定义事件:
slider.$focusSlider.on('slider-show',slider.$focusSlider.loadItem = function(e,index,elem){
//console.log(1);
if(slider.$focusSlider.items[index] !== 'loaded'){
//1.判断没有加载后,触发加载事件
slider.$focusSlider.trigger('slider-loadItem',[index,elem]);
}
});
//2.监听loadItem事件:
slider.$focusSlider.on('slider-loadItem',function(e,index,elem){
//按需加载
var $img = $(elem).find('.slider-img');
slider.loadImg($img.data('src'),function(url){
$img.attr('src',url);
slider.$focusSlider.items[index] = 'loaded';
slider.$focusSlider.loadedItemNum++;
console.log(index + ':loaded');
if(slider.$focusSlider.loadedItemNum === slider.$focusSlider.totalItemNum){
//触发一个全部加载完毕的消息,发送出去
slider.$focusSlider.trigger('slider-itemsLoaded');
}
},function(url){
//多加载一次
//显示备用图片
$img.attr('src','../img/focus-slider/placeholder.png');
});
});
//3.清除事件
slider.$focusSlider.on('slider-itemsLoaded',function(e){
console.log('itemsLoaded');
slider.$focusSlider.off('slider-show',slider.$focusSlider.loadItem);
})
slider.lazyLoad(slider.$focusSlider); //延迟加载
slider.$focusSlider.slider({
css3:true,
js:false,
animation:'fade', //slide
activeIndex:0,
interval:2000
// loop:true // 是否首尾相连
});
//todays-slider
slider.$todaysSlider = $('#todays-slider');
slider.lazyLoad(slider.$todaysSlider); //延迟加载
slider.$todaysSlider.slider({
css3:true,
js:false,
animation:'fade',
activeIndex:0,
interval:0
// loop:true // 是否首尾相连
});
//floor
var $floor = $('.floor');
function lazyLoadFloorImgs($elem){ //延迟加载
var items = {},
loadedItemNum = 0,
totalItemNum = $elem.find('.floor-img').length,
loadItemFn = null;
$elem.on('tab-show',loadItemFn = function(e,index,elem){
console.log(1);
if(items[index] !== 'loaded'){
$elem.trigger('tab-loadItem',[index,elem]);
}
});
$elem.on('tab-loadItem',function(e,index,elem){
//按需加载
var $imgs = $(elem).find('.floor-img');
$imgs.each(function(_,el){
var $img = $(el);
slider.loadImg($img.data('src'),function(url){
$img.attr('src',url);
items[index] = 'loaded';
loadedItemNum++;
console.log(index + 'loaded');
if(loadedItemNum === totalItemNum){
//全部加载完毕
$elem.trigger('tab-itemsLoaded');
}
},function(url){
console.log('从'+url+'加载图片失败');
$img.attr('src','img/floor/placeholder.png');
});
});
});
$elem.on('tab-itemsLoaded',function(e){
console.log('tab-itemsLoaded');
//清除事件
$elem.off('tab-show',loadItemFn);
})
}
$floor.each(function(_,elem){
lazyLoadFloorImgs($(elem));
});
$floor.tab({
event:'mouseenter', //click
css3:false,
js:false,
animation:'fade',
activeIndex:0,
interval:0,
delay:0
});
})(jQuery);
其他代码与源码一样
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星