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。