滑动起来为什么那么卡?
我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');
}
})
});举报