jquery - 预加载图像并在加载时显示微调器

Question

嘿，

我使用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>

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

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