jQuery Deferred не работает

Я пытаюсь использовать объекты jQuery Deferred, чтобы вытолкнуть влево div #image_viewer только после того, как все изображения были добавлены в него с помощью вызова Ajax.

 function myFunc() {
            return $.Deferred(function(apples) {
            for ( j=0; j< otherimages_details.length; j++) {
            var otherimage = "<img class='otherimage' title='" + otherimages_details[j][0] + "'" + "src='" + 'user/' + username_cookie + "_albums/" + otherimages_details[j][1] + "'>";
            var images = images + image;    }
            $('#imageviewer_otherimages').prepend(images);
            apples.resolve();
            }).promise();
            }


            $.when(myFunc()).then(function() {
                            var left = ( ($(window).width() - $('#image_viewer').width() - $('#imageviewer_otherimages').width()) / 2 );    
                            $('#image_viewer').css("left", left)});

Это не работает. #image_viewer по-прежнему загружается до того, как внутри него загрузятся все изображения.


jquery .when deferred
person blurgoon    schedule 20.09.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Все изображения не могут быть загружены, когда apples.resolve(); вызывается после $('#imageviewer_otherimages').prepend(images);

Попробуйте создать отложенное для каждого изображения в цикле for, используя событие load элемента img, разрешить отложенное в обработчике load, $.when.apply разрешить apples при загрузке всех изображений

Обратите внимание, что вы не уверены в ожидаемом результате var images = images + image; ?

function myFunc() {
  var arr = otherimages_details.map(function(img, j) {
              var dfd = $.Deferred();
              var image = $("<img class='otherimage' title='" 
                          + img[0] 
                          + "'>");
              image.on("load", function() {
                dfd.resolve(this)
              })
              .attr("src", "user/" + username_cookie 
                          + "_albums/" 
                          + img[1])
              // ?
              // var images = images + image;  
              return d.promise()  
            });
            return $.when.apply($, arr)        
            .then(function() {
                $('#imageviewer_otherimages')
                .prepend(arguments);
            })
}


myFunc()
.then(function() {
 var left = ( ($(window).width() - $('#image_viewer').width() 
            - $('#imageviewer_otherimages').width()) / 2 );    
 $('#image_viewer').css("left", left)
});
person guest271314    schedule 20.09.2015
comment
Спасибо за быстрый ответ! Я проверю это позже, пришлось спешить. Кстати, я сделал ошибку в своем исходном коде. var otherimage должно быть var image. Это объясняет код var images = images + image. Происходит то, что в базе данных j изображений. Цикл for (j=0 ...) перебирает эти изображения, помещая их в var images каждый раунд. В конце цикла у var images будут все изображения, найденные в базе данных. - person blurgoon; 20.09.2015
comment
@blurgoon См. также stackoverflow.com/questions/29044852/preloading-images- in-html - person guest271314; 20.09.2015