Question

我正在构建此幻灯片，特此是一个临时URL：

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

有多种导航方式，单击大图像转到下一张图像，单击箭头转到下一张或上一张图像，您也可以使用键盘箭头。所有这些事件都调用方法 loadImage （在slideshow.js中）。

图像加载很好，但是在该例程结束时，我正在使用$ .get进行远程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调用。问题是它以非常奇怪的方式触发。我第一次导航到tumb时，它被调用一次。下次触发两次。之后，每个导航操作触发2或3次，通常为3.

我认为必须是我的事件返回多个元素，因此多次调用loadimage例程。所以我在事件和loadimage例程中都放置了日志语句。事实证明，loadimage被正确调用，每次点击只调用一次。

这意味着$ .get似乎在单个调用的上下文中执行此操作。我惊呆了。

Answer 1

您的问题可能是：.imagesLoaded是一个jQuery插件，它贯穿页面上的所有图像。如果您只想将加载事件附加到imagePreloader，请使用

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

否则，请提供您致电loadImage()功能的代码。

<强>更新：单击拇指时这就是问题所在。 $(".photos li a").live('click',...只应在页面加载时调用一次。每次点击拇指时添加click处理程序都不会删除以前的处理程序。

另一种选择是将代码更改为$(".photos li a").unbind('click').live('click', ...，这将删除以前注册的点击处理程序。

jQuery $ .get被多次调用...为什么？

1 个答案: