滚动条滚动加载不出来
来源: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数据引入了 文本太长一次传不了
相似问题