在图片加载后调用函数

Question

我试图在jQuery中动态添加一堆图像到我的页面，然后使用像素图像处理库来修改它们。用户输入一些搜索条件，返回图像url列表，我将它们附加到我的内容区域，然后尝试做一些事情-例如反转它们。下面是我的代码:

function loadImages() {
$.ajax( {
    type: "POST",
    url: "/reporter/api/ezdz/getslides/",
    data: {
        'startDate': $( "#startdate" ).val(),
        'endDate': $( "#enddate" ).val()
    },
    success: function ( data ) {
        for ( var i = 0; i < data.length; i++ ) {
            var imgname = "imgename" + i;
            $( "#imagecontentarea" ).append( '<img id=' + imgname + ' src="' + data[i].ImageUrl + '" />' );
            $( imgname ).one( 'load', function () {
                $( imgname ).pixastic( "invert" );
            } );
        }
    }
} );
}

图像返回很好，我的加载事件甚至被触发…但是图片不会改变。

如果我从文档中调用它，这段代码可以正常工作。准备:

$( "#imagecontentarea" ).append( '<img id="testimg" src="http://localhost/thumbnail.jpg" />' );
$("#testimg").one('load', function() {
    $( "#testimg" ).pixastic( "invert" );
});

我更喜欢在加载时对每个图像进行操作，而不是等到它们全部加载后才开始反转它们。我看了看imagesloaded库，但它看起来像在父容器(?)上运行。

无论如何，我在这里做错了什么?

Answer 1

试着把你的成功函数改成这样:

success: function ( data ) {
    for ( var i = 0; i < data.length; i++ ) {
        var imgname = "imgename" + i;
        $( "#imagecontentarea" ).append( '<img id=' + imgname + ' src="' + data[i].ImageUrl + '" />' );
        (function (imgname) {$( imgname ).one( 'load', function () {
            $( imgname ).pixastic( "invert" );
        } );})(imgname);
    }
}

你的代码没有在闭包中保存imgname，所以你在循环中对姓氏进行操作。

编辑:另一种可能是使用一个类:

success: function ( data ) {
    for ( var i = 0; i < data.length; i++ ) {
        var imgname = "imgename" + i;
        $( "#imagecontentarea" ).append( '<img class="imagename" id=' + imgname + ' src="' + data[i].ImageUrl + '" />' );
    }
    $(".imagename").one( 'load', function () {
        $(this).pixastic( "invert" );
    } );
}