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> 

所以脚本将覆盖大画面采用了灰色半透明层，开始微调和装载衰落后的图片。 （微调在类'loading'的背景中）

感谢您的帮助。

Answer 1

可能你会得到很多js错误，因为你没有正确地链接事物，但是解决方案中的逻辑也有点缺陷。

但是，如果我理解正确你的问题，你需要隐藏bigpic 之前的load事件，并在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 2

你有点重蹈覆辙......第4,000,000次，但这是学习jQuery的一个很好的练习。

用于在网页上调试JavaScript没有什么比Firefox + Firebug插件更胜一筹。

Answer 3

你可能想看看this jQuery loader plugin .. 。or this one。