$.ajax的success函数中，监听【多张图片全部加载成功】事件

最新推荐文章于 2022-08-02 16:58:06 发布

字符集-utf8

最新推荐文章于 2022-08-02 16:58:06 发布

阅读量1k

点赞数

分类专栏： Javascript 文章标签： JQuery监听多张图片加载完成监听多张图片加载完成图片加载完成事件监听

本文链接：https://blog.csdn.net/u014290054/article/details/44247809

版权

Javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<span style="font-style: normal;"><strong>$.ajax({
    url : options.asynOptions.url,
    type : 'post',
    dataType : 'json',
    data : getAjaxData(options.asynOptions.form),
    success : function(data){
        var html = '',
            allow = options.asynOptions.return,
            itemClass = options.itemClass,
            imageClass = options.imageClass,
            count = 0;
        for(var pro in data){
            html += '<div class="'+itemClass+'">';
            html += '<img class="'+imageClass+'" src="'+data[pro][allow[0]]+'" />';
            html += '<span>'+data[pro][allow[1]]+'</span>';
            html += '<span>'+data[pro][allow[2]]+'</span>';
            html += '</div>';
            count++;
        }
        $this.append(html);
        var $colsHeight = [];
        $("."+imageClass).load(function(){
            count--;
            if(count == 0){
                var itemWidth = getFullWith($("."+options.itemClass).eq(0)),
                    cols = getColNumber($this,itemWidth);
                $("."+imageClass).each(function(i,img) {
                    var iheight = getItemFullHeight($("." + itemClass).eq(i));
                    if (i < cols) {
                        $colsHeight[i] = iheight;
                    } else {
                        var minH = Math.min.apply(null, $colsHeight);
                        var minHIndex = $.inArray(minH, $colsHeight);
                        $("." + itemClass).eq(i).css({
                            'position': 'absolute',
                            'top': minH,
                            'left': $(".waterfall_item").eq(minHIndex).position().left
                        });
                        $colsHeight[minHIndex] += iheight;
                    }
                });
            }
        });
    }
});</strong></span>