预加载图像并在加载时显示微调器答案

【问题标题】：preload image and show a spinner while loading预加载图像并在加载时显示微调器
【发布时间】：2011-06-10 10:05:11
【问题描述】：

喂，

我使用uploadify上传一些图片，在我将所有图片缩略图显示在一个列表中之后，当我点击一个图片缩略图时，它会在一个具有此功能的div中打开一个更大的图片

$(".thumbs li a").click(function(){
    var largePath = $(this).attr("href");
    $('.thumbs li').removeClass('thumbac');
    $(this).parent().addClass('thumbac');
    $("#largeImg").attr({ src: largePath });
    return false;
});

这是我的照片列表：

<div class="upimage">
  <ul id="upimagesQueue" class="thumbs">
    <li id="liupimages">
      <a href="uploads/0001.jpg"><img src="uploads/0001.jpg" alt="0001.jpg" id=""></a>
    </li>
    <li id="liupimages">
      <a href="uploads/0002.jpg"><img src="uploads/0002.jpg" alt="0002.jpg" id=""></a>
    </li>
    <li id="liupimages">
      <a href="uploads/0003.jpg"><img src="uploads/0003.jpg" alt="0003.jpg" id=""></a>
    </li>
<script>
$(".thumbs li a").click(function(){
    var largePath = $(this).attr("href");
    $('.thumbs li').removeClass('thumbac');
    $(this).parent().addClass('thumbac');
    $("#largeImg").attr({ src: largePath });
    return false;
});
</script>
  </ul>
</div>

这是显示图像的 div

<div class="largeImg" >     
    <img id="largeImg" src="" />
</div>

如何在显示之前预加载图像？

【问题讨论】：

标签： jquery image loading

【解决方案1】：

您可以以某种方式利用load 事件，例如：

$(".thumbs li a").click(function(){
    var largePath = $(this).attr("href");
    $('.thumbs li').removeClass('thumbac');
    $(this).parent().addClass('thumbac');
    $("#largeImg").hide()
                  .attr({ src: largePath })
                  .load(function() {
                       $(this).show();
                   });
    return false;
});

【讨论】：

【解决方案2】：

这是在 jq 中预加载图像的方法：

    (function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

然后你像这样预加载它们：

jQuery.preLoadImages("image1.gif", "/path/to/image2.png");

【讨论】：

您的操作是同步的，因此没有一个好方法可以让 ajax 加载器启动并运行。如果您愿意，可以通过 ajax 加载它们，当然您可以在请求开始时显示 ajax 加载器图像，然后在 ajax 成功函数中删除该加载器图像。

【解决方案3】：

您可以使用我的插件imgPreload，它在预加载图像时会显示一个漂亮的微调器。

在您的情况下，您只需在现有代码中添加一行：

$("#largeImg").attr({ src: largePath }); //your code
$("#largeImg").imgPreload() //the extra line

有关演示和文档，请参阅此页面 http://denysonique.github.com/imgPreload/。

【讨论】：