自己弄的数据加载完成后结束图片加载问题
YiQing_偉傑
2016-02-24 17:20
例如我文件夹下有100张图片（命名为1.jpg , 2.jpg .....），默认显示20张，然后滚动加载(i+1.jpg这样一直获取类加上去)，怎么判断我加载完100张了，不在让其加载了（前提是，我并不知道文件夹下有多少张图）。
下面方法通过load判断加载完了,但是对加载中的图片再滚动时，由于加载图片需要时间加载，滚动快会出现图片重复加载，部分图片没有加载到，请问高手们怎么解决
$(window).on('load',function(){
$(window).scrollTop(0);
waterfall();
$(window).on('scroll',function(){
if(checkScrollSlide){
var $boxsLength = parseFloat($('#main > div').length);
var dataInt={'data':[{'src':$boxsLength+1+'.jpg'},{'src':$boxsLength+2+'.jpg'},{'src':$boxsLength+3+'.jpg'},{'src':$boxsLength+4+'.jpg'}]};
$.each( dataInt.data, function( index, value ){
$('<img>').attr('src','images/' + $( value).attr( 'src') ).load(function(){
var $oBox = $('<div>').addClass('box').appendTo( $( "#main" ) );
var $oPic = $('<div>').addClass('pic').appendTo( $oBox );
$(this).appendTo($oPic);
})
});
waterfall();
}
});
});2回答
-
- 凃图
- 2018-07-04 20:03:42
这样会在首次加载最后两张图片重叠，有什么好的解决办法吗
-
- dyr
- 2016-03-05 13:35:21
var loadData=true;
$(window).on('load',function(){
$(window).scrollTop(0);
waterfall();
$(window).on('scroll',function(){
if(checkScrollSlide&&loadData){
loadData=false;
var $boxsLength = parseFloat($('#main > div').length);
var dataInt={'data':[{'src':$boxsLength+1+'.jpg'},{'src':$boxsLength+2+'.jpg'},{'src':$boxsLength+3+'.jpg'},{'src':$boxsLength+4+'.jpg'}]};
$.each( dataInt.data, function( index, value ){
$('<img>').attr('src','images/' + $( value).attr( 'src') ).load(function(){
var $oBox = $('<div>').addClass('box').appendTo( $( "#main" ) );
var $oPic = $('<div>').addClass('pic').appendTo( $oBox );
$(this).appendTo($oPic);
})
});
waterfall();
loadData=true;
}
});
});
瀑布流布局
97759 学习 · 736 问题
相似问题