在IE7 / 8中触发之前,jQuery click事件有4-5秒的延迟

时间:2011-12-22 10:02:48

标签: jquery internet-explorer-8 internet-explorer-7

jQuery点击事件在IE7和IE中触发之前有4-5秒的延迟IE8。它只是由于IE JS引擎吗?

有问题的网站:http://www.shirtlisted.com/made-to-measure/(点击面料触发事件)

这是代码段:

    $('.fabric-item').delegate('.fabric', 'click', function() {
        var fabItemID = $(this).attr('id'),
            fabNum = parseInt($(this).attr('href').substring(1));

        $('.fabric-item a').css('outline','none');


        function fabricLoad() {
            shirt.fadeTo(300, 0);
            $('.loaderOne').fadeIn(200);

            $('#v-'+fabItemID).slideDown(400, function() {
                $(this).next().slideDown(400, function() {
                    $('.close, .price').fadeIn(450);
                });

                $.getJSON("../made-to-measure/fabric.json", function (json){
                    var thisFab = $('#v-'+fabItemID).next();

                    $.each(json.fabrics, function (i, fabric) {
                        if(fabric.fabID === fabNum ) {
                            ulImg = '<div class="slides_container">'+ fabric.image.m + '</div>';
                            ulSpec = '<ul class="fabric-specs">'+ fabric.spec +'</ul>';
                            ulDesc = '<p>'+ fabric.description +'</p>';
                            ulPrice = fabric.price;
                            ulShirt = fabric.image.s;
                            pagImg = fabric.image.m;
                            fabURL = fabric.url;
                        }
                    });

                    if(thisFab.children('.fabric-slider').length === 0) {
                        $('<div />', {'class': 'price'}).appendTo('.fabric-detail');
                        $('<div />', {'class': 'fabric-slider',html: ulImg}).appendTo(thisFab);
                        $('<ul />', {'class': 'pagination', html: pagImg}).appendTo('.fabric-slider');
                        $('.pagination img').attr({width: 100, height: 61}).wrap('<li><a></a></li>');
                        $('<div />', {'class': 'fabric-caption',html: ulSpec + ulDesc}).appendTo(thisFab);
                        thisFab.find('.price').append(ulPrice);
                        $('.selectFabric').attr('href',fabURL).fadeIn(350).css('display','block');
                    }
                    if(thisFab.children('.close').length === 0) {
                        $('<a/>', {'href':'#', 'class':'close', html: 'close'}).appendTo(thisFab);
                    }
                    shirt.find('img').detach().end().prepend(ulShirt).addClass('fixed').css('top','115px').fadeTo(550, 1);
                    $('.loaderOne').fadeOut(200);



                    $('.fabric-slider').slides({
                        preload: true,
                        preloadImage: 'http://static.shirtlisted.com/images/spinner.gif',
                        effect: 'slide',
                        crossfade: true,
                        slideSpeed: 450,
                        fadeSpeed: 700,
                        generateNextPrev: true,
                        generatePagination: false,
                        currentClass: 'imgCurrent'
                    });


                    //clicking on img advances to next slide
                    $('.slides_control img').click(function() {
                        $('.next').trigger('click');
                    });

                    //close fabric details
                    $('.close').live('click', function() {
                        sliderUp();
                        return false;
                    });


                    //add to cart action
                    $('.sample').delegate('a', 'click', function() {
                        $('#modal').animate({'top':'0px'},300);
                    });                 
                }); //end getJSON

            $(this).parent().addClass('expanded');
            });
        };

        var fabID = $('.fabric').index($(this)) +1,
            targetOffset = 305;

        if(fabID<=3) {
            targetOffset = 305;
        } else if (fabID<=6) {
            targetOffset = 446;
        } else if (fabID<=9) {
            targetOffset = 587;
        } else if (fabID<=12) {
            targetOffset = 728;
        } else if (fabID<=15) {
            targetOffset = 869;
        } else if (fabID<=18) {
            targetOffset = 1010;
        } else if (fabID<=21) {
            targetOffset = 1151;
        } else if (fabID<=24) {
            targetOffset = 1292;
        } else if (fabID<=27) {
            targetOffset = 1433;
        } else if (fabID<=30) {
            targetOffset = 1574;
        } else if (fabID<=33) {
            targetOffset = 1715;
        } else if (fabID<=36) {
            targetOffset = 1856;
        } else if (fabID<=39) {
            targetOffset = 1997;
        }

        sliderUp();
        if (!$('body, html').is(':animated')) {
            $(window).scrollTo(targetOffset, 500, function() {
                delayFabLoad = setTimeout(function() {
                    fabricLoad();
                }, 200);
            });
        }

        return false;
    });

新代码:

$('.fabric').attr('id', function(arr) {
    return 'i'+ arr;
});

$('.fabric-item .fabric').on('click', function() {
    var fabItemID = $(this).attr('id'), //there are 39 fabItem
        fabNum = parseInt($(this).attr('href').substring(1)), //
        fabricID = $('.fabric').index($(this)) + 1,
        targetOffset = 305;

    shirt.fadeTo(300, 0, function() {
        $('.loaderOne').fadeIn(200);
    });

    if($('.fabric-detail').is(':visible')) {
        sliderUp();
        $(window).scrollTo(targetOffset, 500, function() {
            fabricLoad();
        });
    } else {
        $(window).scrollTo(targetOffset, 500, function() {
            fabricLoad();
        });
    }
    return false;
});

//close fabric details
$('.close').click(function() {
    sliderUp();
    return false;
});

function fabricLoad() {

    $('#v-'+fabItemID).slideDown(400, function() { //fabItemID is undefined
        $(this).next().slideDown(400, function() {
            $('.close, .price').fadeIn(450);
        });

        $.getJSON("../made-to-measure/fabric.json", function (json){
            $.each(json.fabrics, function (i, fabric) {
                if(fabric.fabID === fabNum ) { //fabNum is undefined
                    ulImg = fabric.image.m;
                    ulDesc = '<p>'+ fabric.description +'</p>';
                    ulSpec = '<ul class="fabric-specs">' + fabric.spec + '</ul>'+ ulDesc;
                    ulPrice = fabric.price;
                    ulShirt = fabric.image.s;
                    pagImg = fabric.image.m;
                    fabURL = fabric.url;
                }
            });


            $('.slides_container').html(ulImg).parent().find('.prev, .next').remove();
            $('.pagination').empty().html(pagImg).find('img').attr({width: 100, height: 61}).wrap('<li><a></a></li>');
            $('.fabric-caption').html(ulSpec);
            $('.price').html(ulPrice);
            $('.selectFabric').attr('href',fabURL).fadeIn(350).css('display','block');
            $('.loaderOne').fadeOut(200,function() {
                shirt.find('img').detach().end().prepend(ulShirt).addClass('fixed').css('top','115px').fadeTo(550, 1);
            });

            $('.fabric-slider').slides({
                preload: true,
                preloadImage: 'http://static.shirtlisted.com/images/spinner.gif',
                effect: 'slide',
                crossfade: true,
                slideSpeed: 450,
                fadeSpeed: 700,
                generateNextPrev: true,
                generatePagination: false,
                currentClass: 'imgCurrent'
            });

            //if i take this out of the getJSON it doesn't seem to work
            $('.slides_control img').click(function() {
                $('.next').trigger('click');
            });

        }); //end getJSON

        $(this).parent().addClass('expanded');
    });
}
谢谢。

0 个答案:

没有答案