0

我正在尝试将一堆图像动态添加到我的页面中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库，但它看起来像是在父容器 ( ?) 上运行的。

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

4

1 回答 1

1

Try changing your success function to this:

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

Your code was not saving imgname in the closure, so you were operating on the last name in the loop.

EDIT: Another possibility is to use a class:

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" );
    } );
}
于 2013-04-26T16:05:49.953 回答