为了账号安全,请及时绑定邮箱和手机立即绑定

滑动起来为什么那么卡?

我json数据 写了24个图片, 为什么滑动起来那么卡?

是因为哪些方面没有进行优化吗? 这样的页面用户体验很糟糕阿 。

正在回答

4 回答

不会呀,我试了跟jquery代码的引用有关,有的版本比较流畅,有的就比较卡

0 回复 有任何疑惑可以回复我~

老师的这个函数是每次一触发就把json里的数据全加载了。可以定义一个数来逐渐加载就不用遍历循环了

$(window).on('load',function(){
 waterfall();var ind = 0;var al = 0;
 var dataInt = {"data":[{"src":"image/P_01.jpg"},{"src":"image/P_02.jpg"},{"src":"image/P_03.jpg"},{"src":"image/P_04.jpg"},{"src":"image/P_05.jpg"},{"src":"image/P_06.jpg"}]};
 $(window).on('scroll',function(){
  
  if(checkScrollSlide()){
   if(ind==dataInt.data.length){
    if(al==0){
    alert("图片已加载完毕!");
    al=1;}
    }else{
   var oBox = $("<div>").addClass("box").appendTo($('#main'));
   var oPic = $('<div>').addClass("pic").appendTo(oBox);
   var oImg = $('<img>').attr('src',dataInt.data[ind].src).appendTo(oPic);
   waterfall();
   ind++;
   if(ind==6){ind=0};
   console.log(ind);}
   }
  });
 })

0 回复 有任何疑惑可以回复我~

  那应该如何修改源码?

$(document).ready(function() {
    $("#container").on('mouseenter mouseleave', 'div.photo', function(event) {
        if (event.type == 'mouseenter') {
            $(this).find('div.details').fadeTo('fast', 0.5)
        } else {
            $(this).find('div.details').fadeOut('fast')
        }
    });

    $('#more-photos').click(function() {
        $(this).trigger('nextPage',[true]);
        return false;
    })

    function checkscrollslide(){
        var $height=$(window).scrollTop()+$(window).height();
        if ($('#container').height()<=$height) {
            $(document).trigger('nextPage');
        }
    }
    $(window).scroll(checkscrollslide).trigger('scroll')
    var pagenum = 1;
    $(document).on('nextPage', function(event,scrolltovisible) {
        var $href = $('#more-photos').attr('href');
        $.get($href, function(data) {
            var $data=$(data).appendTo('#gallery');
            if (scrolltovisible) {
                var newtop=$data.offset().top;
                $(window).scrollTop(newtop)
            }
            checkscrollslide()
        }, 'html')
        if (pagenum < 20) {
            pagenum++;
            $('#more-photos').attr('href', 'pages/' + pagenum + '.html');
        } else {
            $('#more-photos').remove();
            $(document).off('nextPage');
        }
    })

});


0 回复 有任何疑惑可以回复我~

因为每次加载新的,前面的节点还会被重新遍历一边。应该从当前新创建的节点开始往后遍历。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

滑动起来为什么那么卡?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信