0

I'm trying to preload images by creating dynamically div and appending to it image object, but unfortunately divs are created but images are not being attached to them. Here's the code:

var preLoadImages = function(im) {
    var args_len = im.length;
    var slides = $('.slides');
    for (var i = args_len; i--;) {
        var img = $('<img>', {
            src : 'img/' + im[i] + '.jpg',
            alt : kp.imgAlt[i]
        })
      img.load(function(){
        (function(index){ 
            kp.cache.push(img);
            var toAppend = $('<div class="slide"></div>')
                            .css({'z-index' : (args_len - index) + 'px'})
                            .append(kp.cache[index]);
            slides.append(toAppend);
            kp.setTimer();
            kp.startSlideshow();
            if(i == 0){
                $('.slides #cover').fadeOut(800, function(){
                    $(this).remove();
                });
            }
        })(i);
      });

    }
  };

What am I doing wrong? When I'm debugging page with Firebug it shows me that images are created properly and exists in kp.cache variable.

lukaleli
  • 3,427
  • 3
  • 22
  • 32
  • You are not appending images in the slides object, I don't know if you want to. – felipeclopes Oct 30 '12 at 19:40
  • I'm appending image to toAppend variable and then toAppend variable to slides object – lukaleli Oct 30 '12 at 19:44
  • I don't see where you are appending them on toAppend. You are pushing them in the cache object, but nothing else. Maybe that is your problem. Isn't it? – felipeclopes Oct 30 '12 at 19:48
  • var toAppend = $('
    ') .css({'z-index' : (args_len - index) + 'px'}) .append(kp.cache[index]);     – lukaleli Oct 30 '12 at 19:52
  • A fiddle demonstrating the bug would help, I think this is related to http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example – pckill Oct 31 '12 at 15:11

0 Answers0