滑动起来为什么那么卡?
我json数据 写了24个图片, 为什么滑动起来那么卡?
是因为哪些方面没有进行优化吗? 这样的页面用户体验很糟糕阿 。
我json数据 写了24个图片, 为什么滑动起来那么卡?
是因为哪些方面没有进行优化吗? 这样的页面用户体验很糟糕阿 。
2016-05-27
老师的这个函数是每次一触发就把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);}
}
});
})
那应该如何修改源码?
$(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'); } }) });
举报