Jquery 如何将图像的名称作为文本附加到div中，因为它使用我的preload函数进行预加载

我有一个javascript预加载程序，它将一组图像加载到我的页面，然后在完成后执行回调函数

在预加载期间，我想将当前预加载的图像附加到加载框中的HTML页面。这是我目前的代码。当前代码并不适用于每个图像，而是只显示上次加载的图像的名称。我可以做些什么来修复我的预加载函数，以便在每次循环中它都将正确的名称附加到我的div中

    // Usage: $(['img1.jpg','img2.jpg']).preloadImages(function(){ ... });
// Callback function gets called after all images are preloaded
$.fn.preloadImages = function(callback) {

  checklist = this.toArray();

  this.each(function() {
    $('div.circleText').html('<p>' +  this + '</p>');

    $('<img>').attr({ src: this }).load(function() {

      checklist.remove($(this).attr('src'));
      if (checklist.length == 0) { callback(); }
    });
  });
};

$([

'../img/about/01-inner-small.png',
'../img/about/01-small.png',
'../img/about/blue-gear.png',
'../img/about/orange-gear.png',
'../img/about/slimeGoblin.png',
'../img/about/03-small.png',
'../img/about/slideshow_back.png',
'../img/about/services_octopus.png',
'../img/about/services_pinkblur.png',
'../img/about/services_blur.png',
'../img/about/services_seahorse.png',
'../img/about/services_coral.png',
'../img/about/water3.png',
'../img/about/water2.png',
'../img/about/water1.png',
'../img/about/02-inner.png',
'../img/about/slime-glow.png',
'../img/about/02_longPhoto.png',
'../img/about/photo1.jpg',
'../img/about/orange-gear.png',
'../img/about/blue-gear.png',
'../img/about/01-small.png',
'../img/about/01.png',
'../img/about/slime-transparent.png',
'../img/about/slime.png',
'../img/about/02-small.png',
'../img/about/02.png',
'../img/about/01_head.png',
'../img/about/services_squid.png',
'../img/about/services_crabs.png',
'../img/about/02-small.png'

]).preloadImages(function(){ 
    // $('#loading').transition({ opacity: 0 }, 1000,'in-out',      
    //  function()
    //  { 
    //      $('#loading').hide();
    //  })
});

//用法：$（['img1.jpg'，'img2.jpg']）。预加载图像（函数（）{…}）；
//在预加载所有图像后调用回调函数
$.fn.preload=函数（回调）{
检查表=此。toArray（）；
这个。每个（函数（）{
$（'div.circleText'）.html（''+this+'
'）；
$（'您的代码运行正常，只是因为它发生的速度太快，您没有意识到。请替换以下行：

$('div.circleText').html('<p>' + value + '</p>');

$（'div.circleText'）.html（''+value+'
'）；

为此：

setTimeout(function() {
    $('div.circleText').html('<p>' + value + '</p>');
}, 1000 + (index * 100));

setTimeout（函数（）{
$（'div.circleText'）.html（''+value+'
'）；
}，1000+（指数*100））；

这将确保在处理数组时可以看到每个数组对象。当然，您可以根据自己的意愿调整每个对象的可见时间

上述解决方案并不能解决问题，只能解决显示器的问题

正确答案如下：

.load（）
函数不好

.load(function() {
                delete checklist[$.inArray($(this).attr('src'),checklist)];
                $('#loading').html('<p>' + $(this).attr('src') + '</p>');
                var done = 0;
                $.each(checklist,function(i){ if(typeof checklist[i] == "undefined") { done++; }})
                if (checklist.length == done) {
                  callback();
              }
          });

.load（函数（）{
删除清单[$.inArray（$（this.attr（'src'），清单）]；
$（'#load'）.html（''+$（this.attr（'src'）+'
'）；
var done=0；
$.each（检查表，函数（i）{if（检查表的类型[i]=“未定义”）{done++；}）
如果（检查表长度==完成）{
回调（）；
}
});

所有这些都需要包装在一个
setTimeout
中，这解决了显示问题，所以它回答了我的问题，但是来自Elyx0的帖子实际上解决了显示文本并在显示过程中加载文本的概念。所以你们都回答正确，但他的答案对于我的项目来说是更好的代码，所以我放弃了当前的加载程序！谢谢你的帮助！