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

源自：3-2 jQuery实现瀑布流布局的图片加载功能

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

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

提问者：YiQing_偉傑 2016-02-24 17:20

个回答

凃图

2018-07-04 20:03:42

这样会在首次加载最后两张图片重叠，有什么好的解决办法吗

0
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;
        }
    });
});

0