jQuery $. get вызывается несколько раз ... почему? - PullRequest
2 голосов
/ 19 февраля 2011

Я создаю это слайд-шоу, тем самым, временный URL:

http://ferdy.dnsalias.com/apps/jungledragon/html/tag/96/homepage/slideshow/mostcomments

Существует несколько способов навигации, при нажатии большого изображения переходят к следующему изображению, при нажатии стрелки идутк следующему или предыдущему изображению, и вы также можете использовать стрелки на клавиатуре.Все эти события вызывают метод loadImage (в slideshow.js).

Загрузка изображения в порядке, однако в конце этой процедуры я выполняю удаленный Ajax-вызов, используя $.получить.Цель этого вызова состоит в том, чтобы посчитать представление этого изображения.Вот псевдо-фрагмент:

function loadImage(id,url) {

        // general image loading routine

        // enable loader indicator
        $("#loading").show();

        var imagePreloader = new Image();
        imagePreloader.src = url;
        loading = true;
        $(imagePreloader).imagesLoaded(function() {

            // load completed, hide the loading indicator
            $("#loading").hide();

            // set the image src, this effectively shows the image
            var img = $("#bigimage img");
            img.attr({ src: url, id: id });
            imageStartTime = new Date().getTime();

            // reset the image dimensions based upon its orientation
            var wide = imagePreloader.width >= imagePreloader.height;
            if (wide) {
                img.addClass('wide');
                img.removeClass('high');
                img.removeAttr('height');
            } else {
                img.addClass('high');
                img.removeClass('wide');
                img.removeAttr('width');
            }

            // update thumb status
            $(".photos li.active").removeClass('active');
            $("#li-" + id).addClass('active');

            // get the title and other attributes from the active thumb and set it on the big image
            var imgTitle = $("#li-" + id + " a").attr('title');
            var userID = $("#li-" + id + " a").attr('data-user_id');
            var userName = $("#li-" + id + " a").attr('data-user_name');

            $(".caption").fadeOut(400,function(){
                $(".caption h1").html('<a href="' + basepath + 'image/' + id + '">' + imgTitle + '</a>');
                $(".caption small").html('Uploaded by <a href="' + basepath + 'user/' + userID + '">' + userName + '</a>');
                $(".caption").fadeIn();
            });

            // update counter
            $(".counter").fadeOut(400,function() { $(".counter").text(parseInt($('.photos li.active .photo').attr('rel'))+1).fadeIn(); });

        // call image view recording function
        $.get(basepath + "image/" + id + "/record/human");

        // loading routine completed
        loading = false;

}

Там есть много вещей, которые не имеют отношения к делу.В конце вы можете видеть, что я делаю вызов $ .get.Проблема состоит в том, что это вызвано очень странными способами.Первый раз, когда я перемещаюсь к тамбу, он вызывается один раз.В следующий раз он срабатывает дважды.После этого он запускается 2 или 3 раза для каждого действия навигации, обычно 3.

Я подумал, что мои события возвращают несколько элементов и поэтому вызывают процедуру loadimage несколько раз.Поэтому я поместил лог-операторы как в события, так и в подпрограмму loadimage.Оказывается, loadimage вызывается правильно, только один раз за клик.

Это означает, что кажется, что $ .get делает это в контексте одного вызова.Я ошеломлен.

1 Ответ

3 голосов
/ 19 февраля 2011

Ваша проблема может быть: .imagesLoaded - это плагин jQuery, который проходит через все изображения на странице. Если вы хотите прикрепить событие загрузки только к imagePreloader, используйте

$(imagePreloader).load(function() {
   ...
}

В противном случае укажите код, по которому вы вызываете функцию loadImage().

Обновление : при нажатии на большой палец В этом проблема. $(".photos li a").live('click',... должен вызываться только один раз при загрузке страницы. Добавление обработчика click при каждом нажатии большого пальца не удалит предыдущие обработчики.

Другой вариант - изменить код на $(".photos li a").unbind('click').live('click', ..., что приведет к удалению ранее зарегистрированных обработчиков щелчков.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...