为什么我最后写完加载不出来图片
来源：4-1 剔除冗余代码
weixin_慕娘0355010
2020-07-02 09:09:28
// 第一中方法
// $('.dropdown').hover(function(){
// var $dropdown=$(this);
// $dropdown.find('.dropdown-toggle').css({
// 'background-color':'#fff',
// 'border-color':'#cdd0d4'
// });
// $dropdown.find('.dropdown-arrow').css({
// 'background-image':'url(../img/dropdown-arrow-active.png)'
// });
// $dropdown.find('.dropdown-layer').show();
// },function(){
// var $dropdown=$(this);
// $dropdown.find('.dropdown-toggle').css({
// 'background-color':'',
// 'border-color':'#f3f5f7'
// });
// $dropdown.find('.dropdown-arrow').css({
// 'background-image':'url(../img/dropdown-arrow.png)'
// });
// $dropdown.find('.dropdown-layer').hide();
// });
//第二种
// $('.dropdown').hover(function(){
// $(this).addClass('dropdown-active');
// },function(){
// $(this).removeClass('dropdown-active')
// })
(function ($) {
var dropdown = {};
$('.menu')
.on("dropdown-show", function (e) {
dropdown.loadOnce($(this), dropdown.buildMenuItem)
})
.dropDown({
css3: true,
js: false,
// delay:0
})
dropdown.buildMenuItem = 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)
};
// hearder search
// var $headerSearch = $('#headerSearch');
// var html = '',
// maxNum = 10;
// $headerSearch.on('search-getData', function (e, data) {
// console.log(e.type)
// // console.log(data)
// 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 () {
// $headerSearch.Search('setInputVal', $(this).html());
// $headerSearch.Search('submit', $(this).html());
// })
// $headerSearch.Search({
// autocomplete: true,
// css3: false,
// js: false,
// animation: 'fade',
// getDateinterval: 200
// })
// function createHeaderSearchLayer(data, maxNum) {
// var html = '';
// var dataNum = data['result'].length;
// var dataLenght = data['result'].length;
// if (dataNum === 0) {
// return '';
// }
// for (var i = 0; i < dataLenght; i++) {
// if (i >= maxNum) {
// break;
// }
// html += ' <li class="search-layer-item text-ellipsis">' + data['result'][i][0] + '</li>';
// }
// return html;
// }
var search = {};
search.$headerSearch = $('#headerSearch');
search.html = '';
search.maxNum = 10;
search.$headerSearch.on('search-getData', function (e, data) {
console.log(e.type)
// console.log(data)
var $this = $(this)
search.html = search.$headerSearch.createHeaderSearchLayer(data, search.maxNum);
$this.Search('appendLayer', search.html)
if (search.html) {
$this.Search('showLayer');
} else {
$this.Search('hideLayer');
}
}).on('search-noData', function (e) {
$(this).Search('hideLayer').Search('appendLayer', '');
}).on('click', '.search-layer-item', function () {
search.$headerSearch.Search('setInputVal', $(this).html());
search.$headerSearch.Search('submit', $(this).html());
})
search.$headerSearch.Search({
autocomplete: true,
css3: false,
js: false,
animation: 'fade',
getDateinterval: 200
})
search.$headerSearch.createHeaderSearchLayer = function createHeaderSearchLayer(data, maxNum) {
var html = '';
var dataNum = data['result'].length;
var dataLenght = data['result'].length;
if (dataNum === 0) {
return '';
}
for (var i = 0; i < dataLenght; 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 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>';
}
// setTimeout(function () {
$elem.find('.dropdown-layer').html(html);
}
dropdown.loadOnce = function loadOnce($elem, success) {
var dataLoad = $elem.data('load');
if (!dataLoad) return;
if (!$elem.data('loaded')) {
$elem.data('loaded', true);
$.getJSON(dataLoad).done(function (data) {
if (typeof success === 'function') success($elem, data);
}).fail(function () {
$elem.data('loaded', false);
});
}
}
//foucs-slider 幻灯片
var slider = {};
slider.$focusSlider = $('#focus-slider');
slider.$todaysSlider = $('#todays-slider');
slider.loadImg = function loadImg(url, imgLoaded, imgFailed) {
var image = new Image();
// console.log(image)
image.onerror = function () {
if (typeof imgFailed === 'function') imgFailed(url);
}
image.onload = function () {
if (typeof imgLoaded === 'function') imgLoaded(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', loadItem = function (e, index, elem) {
if ($elem.items[index] !== 'loaded') {
$elem.trigger('slider-loadItems', [index, elem]);
}
});
$elem.on('slider-loadItems', function (e, index, elem) {
var $imgs = $(elem).find('.slider-img');
$imgs.each(function (_, el) {
// console.log(e, el)
var $img = $(el);
slider.loadImg($img.data('src'), function (url) {
$img.attr('src', url);
console.log(index + ':loaded');
$elem.items[index] = 'loaded';
$elem.loadedItemNum++;
if ($elem.loadedItemNum === $elem.totalItemNum) {
//全部加载完毕触发一个事件
$elem.trigger('slider-itemsLoaded');
}
}, function (url) {
console.log('从' + url + '地址加载失败');
});
})
});
$elem.on('slider-itemsLoaded', function () {
//清除事件
$elem.off('slider-show', loadItem);
});
function loadImg(url, imgLoaded, imgFailed) {
var image = new Image();
// console.log(image)
image.onerror = function () {
if (typeof imgFailed === 'function') imgFailed(url);
}
image.onload = function () {
if (typeof imgLoaded === 'function') imgLoaded(url);
}
setTimeout(function () {
image.src = url;
}, 1000)
}
}
//focus
slider.lazyLoad(slider.$focusSlider)
slider.$focusSlider.slider({
css3: false,
js: true,
animation: 'fade',
activeIndex: 0,
Interval: 4000,
// loop:true
});
//todays
slider.lazyLoad(slider.$todaysSlider)
slider.$todaysSlider.slider({
css3: false,
js: true,
animation: 'slide',
activeIndex: 0,
Interval: 4000,
// loop:true
});
//floor
var $floor = $('.floor');
// console.log(111)
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(111)
if (items[index] !== 'loaded') {
$elem.trigger('tab-loadItems', [index, elem]);
}
});
$elem.on('tab-loadItems', function (e, index, elem) {
var $imgs = $(elem).find('.floor-img');
$imgs.each(function (_, el) {
// console.log(e, el)
var $img = $(el);
slider.loadImg($img.data('src'), function (url) {
$img.attr('src', url);
console.log(index + ':loaded');
items[index] = 'loaded';
loadedItemNum++;
if (loadedItemNum === totalItemNum) {
//全部加载完毕触发一个事件
$elem.trigger('tab-itemsLoaded');
}
}, function (url) {
console.log('从' + url + '地址加载失败');
});
})
});
$elem.on('tab-itemsLoaded', function () {
//清除事件
$elem.off('tab-show', loadItem);
});
}
// $floor.tab({
// event: 'mouseenter',
// css3: false,
// js: false,
// animation: 'fade',
// activeIndex: 0,
// Interval: 1000,
// delay: 500
// });
var floorData = [{
num: '1',
text: '服装鞋包',
tabs: ['大牌', '男装', '女装'],
offsetTop: $floor.eq(0).offset().top,
height: $floor.eq(0).height(),
items: [
[{
name: '匡威男棒球开衫外套2015',
price: 479
}, {
name: 'adidas 阿迪达斯 训练 男子',
price: 335
}, {
name: '必迈BMAI一体织跑步短袖T恤',
price: 159
}, {
name: 'NBA袜子半毛圈运动高邦棉袜',
price: 65
}, {
name: '特步官方运动帽男女帽子2016',
price: 69
}, {
name: 'KELME足球训练防寒防风手套',
price: 4999
}, {
name: '战地吉普三合一冲锋衣',
price: 289
}, {
name: '探路者户外男士徒步鞋',
price: 369
}, {
name: '羽绒服2015秋冬新款轻薄男士',
price: 399
}, {
name: '溯溪鞋涉水鞋户外鞋',
price: 689
}, {
name: '旅行背包多功能双肩背包',
price: 269
}, {
name: '户外旅行双肩背包OS0099',
price: 99
}],
[{
name: '匡威男棒球开衫外套2015',
price: 479
}, {
name: 'adidas 阿迪达斯 训练 男子',
price: 335
}, {
name: '必迈BMAI一体织跑步短袖T恤',
price: 159
}, {
name: 'NBA袜子半毛圈运动高邦棉袜',
price: 65
}, {
name: '特步官方运动帽男女帽子2016',
price: 69
}, {
name: 'KELME足球训练防寒防风手套',
price: 4999
}, {
name: '战地吉普三合一冲锋衣',
price: 289
}, {
name: '探路者户外男士徒步鞋',
price: 369
}, {
name: '羽绒服2015秋冬新款轻薄男士',
price: 399
}, {
name: '溯溪鞋涉水鞋户外鞋',
price: 689
}, {
name: '旅行背包多功能双肩背包',
price: 269
}, {
name: '户外旅行双肩背包OS0099',
price: 99
}],
[{
name: '匡威男棒球开衫外套2015',
price: 479
}, {
name: 'adidas 阿迪达斯 训练 男子',
price: 335
}, {
name: '必迈BMAI一体织跑步短袖T恤',
price: 159
}, {
name: 'NBA袜子半毛圈运动高邦棉袜',
price: 65
}, {
name: '特步官方运动帽男女帽子2016',
price: 69
}, {
name: 'KELME足球训练防寒防风手套',
price: 4999
}, {
name: '战地吉普三合一冲锋衣',
price: 289
}, {
name: '探路者户外男士徒步鞋',
price: 369
}, {
name: '羽绒服2015秋冬新款轻薄男士',
price: 399
}, {
name: '溯溪鞋涉水鞋户外鞋',
price: 689
}, {
name: '旅行背包多功能双肩背包',
price: 269
}, {
name: '户外旅行双肩背包OS0099',
price: 99
}]
]
}, {
num: '2',
text: '个护美妆',
tabs: ['热门', '国际大牌', '国际名品'],
offsetTop: $floor.eq(1).offset().top,
height: $floor.eq(1).height(),
items: [
[{
name: '韩束红石榴鲜活水盈七件套装',
price: 169
}, {
name: '温碧泉八杯水亲亲水润五件套装',
price: 198
}, {
name: '御泥坊红酒透亮矿物蚕丝面膜贴',
price: 79.9
}, {
name: '吉列手动剃须刀锋隐致护',
price: 228
}, {
name: 'Mediheal水润保湿面膜',
price: 119
}, {
name: '纳益其尔芦荟舒缓保湿凝胶',
price: 39
}, {
name: '宝拉珍选基础护肤旅行四件套',
price: 299
}, {
name: '温碧泉透芯润五件套装',
price: 257
}, {
name: '玉兰油多效修护三部曲套装',
price: 199
}, {
name: 'LOREAL火山岩控油清痘洁面膏',
price: 36
}, {
name: '百雀羚水嫩倍现盈透精华水',
price: 139
}, {
name: '珀莱雅新柔皙莹润三件套',
price: 99
}],
[{
name: '韩束红石榴鲜活水盈七件套装',
price: 169
}, {
name: '温碧泉八杯水亲亲水润五件套装',
price: 198
}, {
name: '御泥坊红酒透亮矿物蚕丝面膜贴',
price: 79.9
}, {
name: '吉列手动剃须刀锋隐致护',
price: 228
}, {
name: 'Mediheal水润保湿面膜',
price: 119
}, {
name: '纳益其尔芦荟舒缓保湿凝胶',
price: 39
}, {
name: '宝拉珍选基础护肤旅行四件套',
price: 299
}, {
name: '温碧泉透芯润五件套装',
price: 257
}, {
name: '玉兰油多效修护三部曲套装',
price: 199
}, {
name: 'LOREAL火山岩控油清痘洁面膏',
price: 36
}, {
name: '百雀羚水嫩倍现盈透精华水',
price: 139
}, {
name: '珀莱雅新柔皙莹润三件套',
price: 99
}],
[{
name: '韩束红石榴鲜活水盈七件套装',
price: 169
}, {
name: '温碧泉八杯水亲亲水润五件套装',
price: 198
}, {
name: '御泥坊红酒透亮矿物蚕丝面膜贴',
price: 79.9
}, {
name: '吉列手动剃须刀锋隐致护',
price: 228
}, {
name: 'Mediheal水润保湿面膜',
price: 119
}, {
name: '纳益其尔芦荟舒缓保湿凝胶',
price: 39
}, {
name: '宝拉珍选基础护肤旅行四件套',
price: 299
}, {
name: '温碧泉透芯润五件套装',
price: 257
}, {
name: '玉兰油多效修护三部曲套装',
price: 199
}, {
name: 'LOREAL火山岩控油清痘洁面膏',
price: 36
}, {
name: '百雀羚水嫩倍现盈透精华水',
price: 139
}, {
name: '珀莱雅新柔皙莹润三件套',
price: 99
}]
]
}, {
num: '3',
text: '手机通讯',
tabs: ['热门', '品质优选', '新机尝鲜'],
offsetTop: $floor.eq(2).offset().top,
height: $floor.eq(2).height(),
items: [
[{
name: '摩托罗拉 Moto Z Play',
price: 3999
}, {
name: 'Apple iPhone 7 (A1660)',
price: 6188
}, {
name: '小米 Note 全网通 白色',
price: 999
}, {
name: '小米5 全网通 标准版 3GB内存',
price: 1999
}, {
name: '荣耀7i 海岛蓝 移动联通4G手机',
price: 1099
}, {
name: '乐视（Le）乐2（X620）32GB',
price: 1099
}, {
name: 'OPPO R9 4GB+64GB内存版',
price: 2499
}, {
name: '魅蓝note3 全网通公开版',
price: 899
}, {
name: '飞利浦 X818 香槟金 全网通4G',
price: 1998
}, {
name: '三星 Galaxy S7（G9300）',
price: 4088
}, {
name: '华为 荣耀7 双卡双待双通',
price: 1128
}, {
name: '努比亚(nubia)Z7Max(NX505J)',
price: 728
}],
[{
name: '摩托罗拉 Moto Z Play',
price: 3999
}, {
name: 'Apple iPhone 7 (A1660)',
price: 6188
}, {
name: '小米 Note 全网通 白色',
price: 999
}, {
name: '小米5 全网通 标准版 3GB内存',
price: 1999
}, {
name: '荣耀7i 海岛蓝 移动联通4G手机',
price: 1099
}, {
name: '乐视（Le）乐2（X620）32GB',
price: 1099
}, {
name: 'OPPO R9 4GB+64GB内存版',
price: 2499
}, {
name: '魅蓝note3 全网通公开版',
price: 899
}, {
name: '飞利浦 X818 香槟金 全网通4G',
price: 1998
}, {
name: '三星 Galaxy S7（G9300）',
price: 4088
}, {
name: '华为 荣耀7 双卡双待双通',
price: 1128
}, {
name: '努比亚(nubia)Z7Max(NX505J)',
price: 728
}],
[{
name: '摩托罗拉 Moto Z Play',
price: 3999
}, {
name: 'Apple iPhone 7 (A1660)',
price: 6188
}, {
name: '小米 Note 全网通 白色',
price: 999
}, {
name: '小米5 全网通 标准版 3GB内存',
price: 1999
}, {
name: '荣耀7i 海岛蓝 移动联通4G手机',
price: 1099
}, {
name: '乐视（Le）乐2（X620）32GB',
price: 1099
}, {
name: 'OPPO R9 4GB+64GB内存版',
price: 2499
}, {
name: '魅蓝note3 全网通公开版',
price: 899
}, {
name: '飞利浦 X818 香槟金 全网通4G',
price: 1998
}, {
name: '三星 Galaxy S7（G9300）',
price: 4088
}, {
name: '华为 荣耀7 双卡双待双通',
price: 1128
}, {
name: '努比亚(nubia)Z7Max(NX505J)',
price: 728
}]
]
}, {
num: '4',
text: '家用电器',
tabs: ['热门', '大家电', '生活电器'],
offsetTop: $floor.eq(3).offset().top,
height: $floor.eq(3).height(),
items: [
[{
name: '暴风TV 超体电视 40X 40英寸',
price: 1299
}, {
name: '小米（MI）L55M5-AA 55英寸',
price: 3699
}, {
name: '飞利浦HTD5580/93 音响',
price: 2999
}, {
name: '金门子H108 5.1套装音响组合',
price: 1198
}, {
name: '方太ENJOY云魔方抽油烟机',
price: 4390
}, {
name: '美的60升预约洗浴电热水器',
price: 1099
}, {
name: '九阳电饭煲多功能智能电饭锅',
price: 159
}, {
name: '美的电烤箱家用大容量',
price: 329
}, {
name: '奥克斯(AUX)936破壁料理机',
price: 1599
}, {
name: '飞利浦面条机 HR2356/31',
price: 665
}, {
name: '松下NU-JA100W 家用蒸烤箱',
price: 1799
}, {
name: '飞利浦咖啡机 HD7751/00',
price: 1299
}],
[{
name: '暴风TV 超体电视 40X 40英寸',
price: 1299
}, {
name: '小米（MI）L55M5-AA 55英寸',
price: 3699
}, {
name: '飞利浦HTD5580/93 音响',
price: 2999
}, {
name: '金门子H108 5.1套装音响组合',
price: 1198
}, {
name: '方太ENJOY云魔方抽油烟机',
price: 4390
}, {
name: '美的60升预约洗浴电热水器',
price: 1099
}, {
name: '九阳电饭煲多功能智能电饭锅',
price: 159
}, {
name: '美的电烤箱家用大容量',
price: 329
}, {
name: '奥克斯(AUX)936破壁料理机',
price: 1599
}, {
name: '飞利浦面条机 HR2356/31',
price: 665
}, {
name: '松下NU-JA100W 家用蒸烤箱',
price: 1799
}, {
name: '飞利浦咖啡机 HD7751/00',
price: 1299
}],
[{
name: '暴风TV 超体电视 40X 40英寸',
price: 1299
}, {
name: '小米（MI）L55M5-AA 55英寸',
price: 3699
}, {
name: '飞利浦HTD5580/93 音响',
price: 2999
}, {
name: '金门子H108 5.1套装音响组合',
price: 1198
}, {
name: '方太ENJOY云魔方抽油烟机',
price: 4390
}, {
name: '美的60升预约洗浴电热水器',
price: 1099
}, {
name: '九阳电饭煲多功能智能电饭锅',
price: 159
}, {
name: '美的电烤箱家用大容量',
price: 329
}, {
name: '奥克斯(AUX)936破壁料理机',
price: 1599
}, {
name: '飞利浦面条机 HR2356/31',
price: 665
}, {
name: '松下NU-JA100W 家用蒸烤箱',
price: 1799
}, {
name: '飞利浦咖啡机 HD7751/00',
price: 1299
}]
]
}, {
num: '5',
text: '电脑数码',
tabs: ['热门', '电脑/平板', '潮流影音'],
offsetTop: $floor.eq(4).offset().top,
height: $floor.eq(4).height(),
items: [
[{
name: '戴尔成就Vostro 3800-R6308',
price: 2999
}, {
name: '联想IdeaCentre C560',
price: 5399
}, {
name: '惠普260-p039cn台式电脑',
price: 3099
}, {
name: '华硕飞行堡垒旗舰版FX-PRO',
price: 6599
}, {
name: '惠普(HP)暗影精灵II代PLUS',
price: 12999
}, {
name: '联想(Lenovo)小新700电竞版',
price: 5999
}, {
name: '游戏背光牧马人机械手感键盘',
price: 499
}, {
name: '罗技iK1200背光键盘保护套',
price: 799
}, {
name: '西部数据2.5英寸移动硬盘1TB',
price: 419
}, {
name: '新睿翼3TB 2.5英寸 移动硬盘',
price: 849
}, {
name: 'Rii mini i28无线迷你键盘鼠标',
price: 349
}, {
name: '罗技G29 力反馈游戏方向盘',
price: 2999
}],
[{
name: '戴尔成就Vostro 3800-R6308',
price: 2999
}, {
name: '联想IdeaCentre C560',
price: 5399
}, {
name: '惠普260-p039cn台式电脑',
price: 3099
}, {
name: '华硕飞行堡垒旗舰版FX-PRO',
price: 6599
}, {
name: '惠普(HP)暗影精灵II代PLUS',
price: 12999
}, {
name: '联想(Lenovo)小新700电竞版',
price: 5999
}, {
name: '游戏背光牧马人机械手感键盘',
price: 499
}, {
name: '罗技iK1200背光键盘保护套',
price: 799
}, {
name: '西部数据2.5英寸移动硬盘1TB',
price: 419
}, {
name: '新睿翼3TB 2.5英寸 移动硬盘',
price: 849
}, {
name: 'Rii mini i28无线迷你键盘鼠标',
price: 349
}, {
name: '罗技G29 力反馈游戏方向盘',
price: 2999
}],
[{
name: '戴尔成就Vostro 3800-R6308',
price: 2999
}, {
name: '联想IdeaCentre C560',
price: 5399
}, {
name: '惠普260-p039cn台式电脑',
price: 3099
}, {
name: '华硕飞行堡垒旗舰版FX-PRO',
price: 6599
}, {
name: '惠普(HP)暗影精灵II代PLUS',
price: 12999
}, {
name: '联想(Lenovo)小新700电竞版',
price: 5999
}, {
name: '游戏背光牧马人机械手感键盘',
price: 499
}, {
name: '罗技iK1200背光键盘保护套',
price: 799
}, {
name: '西部数据2.5英寸移动硬盘1TB',
price: 419
}, {
name: '新睿翼3TB 2.5英寸 移动硬盘',
price: 849
}, {
name: 'Rii mini i28无线迷你键盘鼠标',
price: 349
}, {
name: '罗技G29 力反馈游戏方向盘',
price: 2999
}]
]
}];
function loadImgs($imgs, success,fail) {
$imgs.each(function (_, el) {
// console.log(e, el)
var $img = $(el);
slider.loadImg($img.data('src'), function (url) {
$img.attr('src', url);
success();
}, function (url) {
console.log('从' + url + '地址加载失败');
fail($img,url);
});
})
}
// op = {
// $container:$elem,
// totalItemNuma:5,
// triggerEvent:'floor-show',
// id:'floors'
// }
function loadUntil(options) {
// console.log(options.id)
// console.log('111' + id)
var items = {},
loadedItemNum = 0,
// totalItemNum = $floor.length;
loadItemfn = null,
$elem = options.$container,
id = options.id;
$elem.on(options.triggerEvent, loadItemfn = function (e, index, elem) {
console.log(111)
if (items[index] !== 'loaded') {
$elem.trigger(id + '-loadItems', [index, elem, function () {
items[index] = 'loaded';
loadedItemNum++;
if (loadedItemNum === options.totalItemNum) {
//全部加载完毕触发一个事件
$elem.trigger(id + '-itemsLoaded');
}
}]);
}
});
$elem.on(id + '-itemsLoaded', function () {
//清除事件
$elem.off(options.triggerEvent, loadItemfn);
// $win.off('scroll resize', timeToShow);
});
}
// function lazyLoadFloor() {
// var items = {},
// loadedItemNum = 0,
// totalItemNum = $floor.length;
// loadItemfn = null;
// $doc.on('floor-show', loadItemfn = function (e, index, elem) {
// console.log(111)
// if (items[index] !== 'loaded') {
// $doc.trigger('floor-loadItems', [index, elem]);
// }
// });
// $doc.on('floor-loadItems', function (e, index, elem) {
// var html = buildFloor(floorData[index]),
// $elem = $(elem);
// // console.log(index + ':loaded');
// items[index] = 'loaded';
// loadedItemNum++;
// if (loadedItemNum === totalItemNum) {
// //全部加载完毕触发一个事件
// $doc.trigger('floor-itemsLoaded');
// }
// console.log('aaa')
// setTimeout(function () {
// $elem.html(html);
// lazyLoadFloorImgs($elem)
// $elem.tab({
// event: 'mouseenter',
// css3: false,
// js: false,
// animation: 'fade',
// activeIndex: 0,
// Interval: 1000,
// delay: 500
// });
// }, 1000)
// });
// $doc.on('floor-itemsLoaded', function () {
// //清除事件
// $doc.off('floor-show', loadItemfn);
// $win.off('scroll resize', timeToShow)
// });
// }
function buildFloor(floorData) {
var html = '';
html += '<div class="container">';
html += buildFloorHead(floorData);
html += buildFloorBody(floorData);
html += '</div>';
return html;
}
function buildFloorHead(floorData) {
var html = '';
html += '<div class="floor-head">';
html += '<h2 class="floor-title fl"><span class="floor-title-num">' + floorData.num + 'F</span><span class="floor-title-text">' + floorData.text + '</span></h2>';
html += '<ul class="tab-item-wrap fr">';
for (var i = 0; i < floorData.tabs.length; i++) {
html += '<li class="fl"><a href="javascript:;" class="tab-item">' + floorData.tabs[i] + '</a></li>';
if (i !== floorData.tabs.length - 1) {
html += '<li class="floor-divider fl text-hidden">分隔线</li>';
}
}
html += '</ul>';
html += '</div>';
return html;
}
function buildFloorBody(floorData) {
html = '';
html += '<div class="floor-body">';
for (i = 0; i < floorData.items.length; i++) {
html += '<ul class="tab-panel">';
for (var j = 0; j < floorData.items[i].length; j++) {
html += '<li class="floor-item fl">';
html += '<p class="floor-item-pic"><a href="###" target="_blank"><img src="../img/floor/loading.gif" class="floor-img" data-src="../img/floor/' + floorData.num + '/' + (i + 1) + '/' + (j + 1) + '.png" alt="" /></a></p>';
html += '<p class="floor-item-name"><a href="###" target="_blank" class="link">' + floorData.items[i][j].name + '</a></p>';
html += '<p class="floor-item-price">' + floorData.items[i][j].price + '</p>';
html += '</li>';
}
html += '</ul>'
}
html += '</div>';
return html;
}
var $win = $(window);
var $doc = $(document);
function isVisible($elem) {
return ($win.height() + $win.scrollTop() > $elem.offset().top && $win.scrollTop() < $elem.offset().top + $elem.height());
}
function timeToShow() {
$floor.each(function (index, elem) {
if (isVisible($(elem))) {
console.log(index + 'show')
$doc.trigger('floor-show', [index, elem]);
}
})
}
$floor.on('floor-loadItems', function (e, index, elem, success) {
loadImg($(elem).find('.floor-img'),success,function($img,url){
$img.attr('src','../img/floor/placeholder.png');
})
})
$doc.on('floor-loadItems', function (e, index, elem, success) {
var html = buildFloor(floorData[index]),
$elem = $(elem);
// console.log(index + ':loaded');
success();
setTimeout(function () {
$elem.html(html);
loadUntil({
$container: $elem,
totalItemNuma: $elem.find('.floor-img').length,
triggerEvent: 'tab-show',
id: 'floor'
})
$elem.tab({
event: 'mouseenter',
css3: false,
js: false,
animation: 'fade',
activeIndex: 0,
Interval: 1000,
delay: 500
});
}, 1000)
});
$doc.on('floor-itemsLoaded', function () {
$win.off('scroll resize', timeToShow);
})
$win.on('scroll resize', timeToShow)
loadUntil({
$container: $doc,
totalItemNuma: $floor.length,
triggerEvent: 'floor-show',
id: 'floors'
});
timeToShow();
})(jQuery)
1回答
-
好帮手慕久久
2020-07-02
同学你好，代码中有如下问题：
1. 每一个楼层调用loadUntil时，传入的id是“floors”，所以对应监听的事件应该是“floors-loadItems”和“floors-itemsLoaded”，对应修改如下：
2. 加载每一个楼层内图片数据时，方法名应该是loadImgs，如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题