滚动条滚动加载不出来

来源: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">&#xe600;</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

你好,代码中定义的事件名称和滚动事件中调用的事件名称不一致:

http://img.mukewang.com/climg/5c4ad2ab0001820710490517.jpg

把定时器中修改为上面的名称就可以了。

自己测试下,祝学习愉快!

0

慕后端8593059

提问者

2019-01-25

floorData数据引入了 文本太长一次传不了

0

0 学习 · 4826 问题

查看课程

相似问题