                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /瀑布流布局

自己弄的数据加载完成后结束图片加载问题

例如我文件夹下有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();
            
        }                               
    });
});