JQuery图片加载

Question

我在jQuery中需要一些帮助。我想要做的是创建一些小图片库。在这个画廊中，我有几张小照片和一张大照片。点击一张小图片，我希望jQuery加载并替换大图片。

这是一个不起作用的小尝试！但也许有人可以告诉我为什么。

$(function(){
   $("a.smallpics").click(function(e){
      $(".bigpic")
      .load(function () {
          $(this).hide();
          $('#loader')
            .append(this);
            .removeClass('loading')
          $(this).fadeIn();
      });
      .attr('src', this.href);
      e.preventDefault();
   });
});

和html

<a href="pic1_big.jpg" class="smallpics" /><img src="pic1_small.jpg" style="width: 20px; height: 20px" /></a>
<a href="pic2_big.jpg" class="smallpics" /><img src="pic2_small.jpg" style="width: 20px; height: 20px" /></a>
<a href="pic3_big.jpg" class="smallpics" /><img src="pic3_small.jpg" style="width: 20px; height: 20px" /></a>
<div id="loader" class="loading" /><img src="pic3_big.jpg" class="bigpic" /></div>

因此，在最好的情况下，脚本将覆盖带有灰色半透明层的大图片，启动微调器并在加载淡入图片后。 （Spinner处于“加载”类的背景中）

感谢您的帮助。

Answer 1

你有点重新发明轮子......第4,000,000次，但这对于学习jQuery来说是一个很好的练习。

为了在网页上调试javascript，没有什么比Firefox + Firebug插件更好。

Answer 2

由于你没有正确地链接东西，你可能会遇到很多js错误，但你的解决方案中的逻辑也有点缺陷。

但是，如果我正确理解了您的问题，则需要在<{em} load事件之前隐藏bigpic ，并在load事件中再次显示：

$(function(){
    $('a.smallpics').click(function() {        
        var $bigpic = $('.bigpic');
        var $loader = $('#loader').show();        
        $bigpic.hide().load(function () {
            $loader.fadeOut();
            $(this).fadeIn();
        }).attr('src', $(this).attr('href'));
        return false;
    });
});

Answer 3

您可以查看this jQuery loader plugin ... or this one。