使用 jQueryUI 选项卡为 AJAX 内容预加载图像答案

【问题标题】：Preload images for AJAX content using jQueryUI-tabs使用 jQueryUI 选项卡为 AJAX 内容预加载图像
【发布时间】：2010-02-26 17:55:51
【问题描述】：

所以我有一个使用 ui-tabs 的非常好的应用程序。问题是，我无法在我的 ajax 内容中找到一种在显示选项卡面板之前预加载图像的方法。我能想到的唯一方法是创建自己的 ajax 功能来加载选项卡面板内容，并在 ajax 调用中添加类似的内容：

success: function(response){
    $(response).find('img').preload({
            onFinish: function(){
                    currentTabPanel.show();
            }
    });

}

但我认为有一种更好的方法可以使用 jQueryUi.tabs() 对象中的内置 AJAX 方法和事件来解决这个问题。我只是不认为我看到了它。 .arg..有什么想法吗？？

【问题讨论】：

标签： jquery ajax jquery-ui tabs preloader

【解决方案1】：

什么是响应？它代表什么？

假设您有一个名为 imgList 的表示图像的对象列表：

var imagePreloader = new Image();

if(imgList.length != 0)
{
   imagePreloader.load(function() {
      if(imgList.length != 0)
      {
         var img = imglist.pop();
         imagePreloader.src = img.imgSrc;
      }
      else
      {
         currentTabPanel.show();
      }
   });

   imagePreloader.src = imgList.pop().imgSrc;   
}

【讨论】：

响应只是一些 HTML 标记，其中可能有也可能没有一些 img 标签。那么，您会将这段代码放在哪里，以便在完成加载此代码之前不会显示选项卡面板内容？

【解决方案2】：

这是我有时使用的一个肮脏的小脚本，但效果很好：

var imgstopreload = new Array('file1.jpg', 'file2.jpg', 'etc.jpg');
for (x in imgstopreload){
    (new Image).src = imgstopreload[x];
}

我不会对大量大图像执行此操作，因为在图像完成之前页面不会完成加载，但是如果您必须准备好它们，它就可以工作。把它放在你的索引里:)

【讨论】：

是的。唯一的问题是，AJAX 内容中的图像是动态的。我将无法知道图像的名称。这就是为什么我有上面的 $(response).find('img').preload() 代码......不过谢谢......