Загрузка изображения 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>

Таким образом, в лучшем случае скрипт покроет большую картинку серым полупрозрачным слоем, запустит счетчик и после загрузки затухает изображение.(Спиннер находится на фоне «загрузки» класса)

Спасибо за вашу помощь.

Answer 1

Возможно, вы получаете много ошибок js, поскольку вы неправильно связываете вещи, но логика вашего решения также немного ошибочна.

Но если я правильно понял ваш вопрос, вам нужно скрыть бигпик до тот 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

Вы можете проверить этот плагин загрузчика jQuery... или этот.