javascript - 如何将图像动态插入 DOM？

Question

我正在尝试通过动态创建 div 并将其附加到图像对象来预加载图像，但不幸的是，div 已创建但图像未附加到它们。这是代码：

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

    }
  };

我究竟做错了什么？当我使用 Firebug 调试页面时，它显示图像已正确创建并存在于kp.cache变量中。