1

I'm trying to use jQuery Deferred objects to push left a div #image_viewer only after all the images have been prepend-ed into it through an Ajax call.

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

It's not working. #image_viewer still gets pushed before all images are loaded inside of it.

blurgoon
  • 335
  • 3
  • 13

1 Answers1

0

All images may not be loaded when apples.resolve(); called after $('#imageviewer_otherimages').prepend(images);

Try creating deferred for each image within for loop , using load event of img element , resolve deferred within load handler , $.when.apply to resolve apples when all images loaded

Note, not certain about expected result of 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)
});
guest271314
  • 1
  • 15
  • 104
  • 177
  • Thanks for the quick reply! I'll check this out later, had to rush out. Btw, I made an error in my original code. `var otherimage` should be `var image`. That explains the `var images = images + image` code. What's happening is that there is `j` number of images in the database. The `for (j=0 ...)` loop iterates through these images, putting them into `var images` each round. At the end of the loop, `var images` will have all the images found in the database. – blurgoon Sep 20 '15 at 03:43
  • @blurgoon See also http://stackoverflow.com/questions/29044852/preloading-images-in-html – guest271314 Sep 20 '15 at 03:50