Question

HY，

我使用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;
});

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

Answer 3

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

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

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

请参阅此页http://denysonique.github.com/imgPreload/以获取演示和文档。

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

3 个答案: