滚动条滚动加载不出来
来源:4-3 优化代码--性能优化
慕后端8593059
2019-01-25 14:23:19
(function($) {
'use strict';
//menu
var dropdown={};
$('.menu')
.on('dropdown-show', function(e) {
dropdown.loadOnce($(this), dropdown.buildMenuItem);
})
.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);
};
//cart购物车
$('#cart').on('dropdown-show', function() {
dropdown.loadOnce($(this), function($elem, data) {
dropdown.buildCartItem($elem, data);
dropdown.updateCart($elem, data);
});
}).dropdown({
css3: true,
js: false
});
dropdown.buildCartItem=function($elem, data) {
var html = "";
if (data.length === 0) { // no goods
html += '<div class="cart-nogoods"><i class="icon cart-nogoods-icon fl"></i><div class="cart-nogoods-text fl">购物车里还没有商品<br />赶紧去选购吧!</div></div>';
$elem.find('.dropdown-layer').html(html);
return;
}
html += '<h4 class="cart-title">最新加入的商品</h4><ul class="cart-list">';
for (var i = 0; i < data.length; i++) {
html += '<li class="cart-item"><a href="###" target="_blank" class="cart-item-pic fl"><img src="' + data[i].pic + '" alt="" /></a><div class="fl"><p class="cart-item-name text-ellipsis"><a href="###" target="_blank" class="link">' + data[i].name + '</a></p><p class="cart-item-price"><strong>¥' + data[i].price + ' x ' + data[i].num + '</strong></p></div><a href="javascript:;" title="删除" class="cart-item-delete link fr">X</a></li>';
}
html += '</ul><div class="cart-info"><span class="fl">共 <strong class="cart-total-num">0</strong> 件商品 共计<strong class="cart-total-price">¥ 0.00</strong></span><a href="###" target="_blank" class="cart-info-btn btn fr">去购物车</a></div>';
// setTimeout(function(){
$elem.find('.dropdown-layer').html(html);
// },1000);
};
function updateCart($elem, data) {
var $cartNum = $elem.find('.cart-num'),
$cartTotalNum = $elem.find('.cart-total-num'),
$cartTotalPrice = $elem.find('.cart-total-price'),
dataNum = data.length,
totalNum = 0,
totalPrice = 0;
if (dataNum === 0) { // no goods
return;
}
for (var i = 0; i < dataNum; i++) {
totalNum += +data[i].num;
totalPrice += +data[i].num * +data[i].price;
}
$cartNum.html(totalNum);
$cartTotalNum.html(totalNum);
$cartTotalPrice.html('¥' + totalPrice);
};
//header search
var search={};
search.$headerSearch = $('#header-search');
search.$headerSearch.html = '';
search.$headerSearch.maxNum = 10;
// 获得数据处理
search.$headerSearch.on('search-getData', function(e, data) {
var $this = $(this);
search.$headerSearch.html = search.$headerSearch.createHeaderSearchLayer(data, search.$headerSearch.maxNum);
$this.search('appendLayer',html);
// 将生成的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() {
// 点击每项时,提交
search.$headerSearch.search('setInputVal', $(this).html());
search.$headerSearch.search('submit');
});
search.$headerSearch.search({
autocomplete: true,
css3: false,
js: false,
animation: 'fade',//切换方式
getDataInterval: 0
});
// 获取数据,生成html
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-detail cf"><dt class="category-detail-title fl"><a href="###" target="_blank" class="category-detail-title-link">' + data[i].title + '</a></dt><dd class="category-detail-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);
// },1000);
};
dropdown.loadOnce= function($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);
});
}
};
//公共部分 //延迟加载楼层
var lazyLoad={};
lazyLoad.loadUntil=function(options){
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(1);
if (items[index] !== 'loaded') {
$elem.trigger(id+'-loadItem', [index, elem,function () {
items[index] = 'loaded';
// console.log(items[index]);
loadedItemNum++;
console.log(index + ': loaded');
if (loadedItemNum === options.totalItemNum) {
// 全部加载完毕
$elem.trigger(id+'-itemsLoaded');
}
}]);
}
});
//加载完毕
$elem.on(id+'-itemsLoaded', function(e) {
console.log(id+'-itemsLoaded');
// 清除事件
$elem.off(options.triggerEvent, loadItemFn);
// $win.off('scroll resize', timeToShow);
});
};
lazyLoad.isVisible=function (floorData) {
var $win=floor.$win;
return ($win.height()+$win.scrollTop()>floorData.offsetTop) && ($win.scrollTop()<floorData.offsetTop+floorData.height);
}
//img load
var imgLoader = {};
imgLoader.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);
};
imgLoader.loadImgs = function($imgs, success, fail) {
// var $imgs=$(elelm).find('.floor-img');
$imgs.each(function(_, el) { // _ 相当占位,不使用该参数。
var $img = $(el);
imgLoader.loadImg($img.data('src'), function(url) {
$img.attr('src', url);
success();
}, function(url) {
console.log('从' + url + '加载图片失败');
// 多加载一次
// 显示备用图片
// $img.attr('src', 'img/floor/placeholder.png');
fail($img, url);
});
});
}
// foucs-slider
var slider={};
slider.$focusSlider=$('#focus-slider');
slider.$focusSlider.on('focus-loadItem',function(e,index,elem,success){
imgLoader.loadImgs($(elem).find('.slider-img'),success,function ($img,url) {
$img.attr('src','img/focus-slider/floor.placeholder.png');
});
});
lazyLoad.loadUntil({
$container: slider.$focusSlider,
totalItemNum: slider.$focusSlider.find('.slider-img').length,
triggerEvent: 'slider-show',
id: 'focus'
})
slider.$focusSlider.slider({
css3: true,
js: false,
animation: 'fade', // fade slide//切换方式
activeIndex: 0,
interval: 0
});
// todays-slider
slider.$todaysSlider = $('#todays-slider');
slider.$todaysSlider.on('todays-loadItem',function(e,index,elem,success){
imgLoader.loadImgs($(elem).find('.slider-img'),success,function ($img,url) {
$img.attr('src','img/todays-slider/floor.placeholder.png');
});
});
lazyLoad.loadUntil({
$container: slider.$todaysSlider,
totalItemNum: slider.$todaysSlider.find('.slider-img').length,
triggerEvent: 'slider-show',
id: 'todays'
})
slider.$todaysSlider.slider({
css3: true,
js: false,
animation: 'fade', // fade slide//切换方式
activeIndex: 0,
interval: 0
});
// 楼层导航js调用 floor
//floor
var floor={};
floor.$floor=$('.floor');
floor.buildFloor=function buildFloor(floorData) {
var html = '';
html += '<div class="container">';
html += floor.buildFloorHead(floorData);
html += floor.buildFloorBody(floorData);
html += '</div>';
return html;
};
//按需加载头部
floor.buildFloorHead=function (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;
};
//主体
floor.buildFloorBody=function (floorData) {
var html = '';
html += '<div class="floor-body">';
for (var 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;
};
floor.$win=$(window);
floor.$doc=$(document);
floor.timeShow=function (){
console.log('time show');
floor.$floor.each(function(index,elem){
if(lazyLoad.isVisible(floor.floorData[index])){
// console.log('the '+(index+1)+' floor is visible');
floor.$doc.trigger('floor-show',[index,elem]);
}
});
}
//稀释事件流
floor.$win.on('scroll resize', floor.showFloor=function () {
clearTimeout(floor.floorTimer);
floor.floorTimer=setTimeout(floor.timeToShow,250);
});
floor.$floor.on('floor-loadItem',function(e,index,elem,success){
imgLoader.loadImgs($(elem).find('.floor-img'),success,function ($img,url) {
$img.attr('src','img/floor.placeholder.png');
});
});
floor.$doc.on('floors-loadItem',function (e,index,elem,success) {
var html=floor.buildFloor(floor.floorData[index]),
$elem=$(elem);
success();
setTimeout(function () {
$elem.html(html);
lazyLoad.loadUntil({
$container: $elem,
totalItemNum: $elem.find('.floor-img').length,
triggerEvent: 'tab-show',
id: 'floor'
});
$elem.tab({
event:'mouseenter',// mouseenter或click
css3:false,
js:false,
animation:'fade',
activeIndex:0,
interval:0,
delay:0
});
},1000);
});
floor.$doc.on('floors-itemsLoaded',function(){
floor.$win.off('scroll resize',floor.showFloor);
})
//调用
lazyLoad.loadUntil({
$container:floor.$doc,
totalItemNum:floor.$floor.length, //个数
triggerEvent:'floor-show',
id:'floors'
});
floor.timeShow();
})(jQuery);2回答
好帮手慕星星
2019-01-25
你好,代码中定义的事件名称和滚动事件中调用的事件名称不一致:

把定时器中修改为上面的名称就可以了。
自己测试下,祝学习愉快!
慕后端8593059
提问者
2019-01-25
floorData数据引入了 文本太长一次传不了
相似问题