Question

我正在尝试在jQuery中向我的页面动态添加一堆图像，然后使用pixastic图像处理库来修改它们。用户输入一些搜索条件，返回图像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" );
            } );
        }
    }
} );
}

图像返回正常，我的加载事件甚至被触发......但图像不会改变。

如果我从document.ready：

调用它，这段代码可以正常工作

$( "#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" );
    } );
}

加载后在图像上调用函数

1 个答案: