Question

我正在创建一个自定义灯箱，它基本上是从滑块中的小图像生成的大图像。从小图像到大图像的过渡是动画的。它工作正常，但经过几次点击/触发后，你可以看到帧显示瞬间直到达到最终状态变得非常慢。是否存在我不知道的动画方法的问题？或者我使用它错了，我的意思是使用animate方法有什么标准吗？或者我的代码很糟糕？这是我的代码。

var $j = jQuery.noConflict();
$curIndex = 0;

function curIndex(){
    return $curIndex;
}

function next($index, $direct){

    var $sliderList = $j('#mainSlider li');
    var $imgs = {};

    $sliderList.map(function(index){
        $imgs[index] = $j(this).children('img').attr('src');     
    });

    if ($index == -1) {
        return $imgs[$index + 1]; 

    } else if ($index == $sliderList.length) {
        return $imgs[$index - 1]; 

    } else {

        $curIndex = $index;
        return $imgs[$index];    
    }  
}

function get_size($type) {

    var $width = $j(window).width(); 
    var $height = $j(window).height();
    var $top = $j(window).height();  

    if ($type == 'width') {
        return $width;
    } else if ($type == 'height') {
        return $height;
    } else {
        return $top;
    }
}

$j(document).ready(function(){

    var $imgStyle = {
        'top' : get_size('top') * .075 + 'px',
        'left' : get_size('width') * .125 + 'px',
        'width' : get_size('width') * .75 + 'px', 
        'height' : get_size('height') * .85 + 'px',
        'position':'absolute', 
        'z-index':'200'
    };

    $j('body').append(
        '<div class="arj-lightbox-con"><div class="arj-lightbox-shade"></div></div>'
    );

    $j('#mainSlider img').click(function(){

        var $offset = $j(this).offset();
        var $clckdImage = $j(this);

        $j('.arj-lightbox-con').fadeIn().append('<div class="arj-controls"></div><div class="arj-caption"></div>');

        $j('.arj-controls').css({
            'top' : get_size('top') * .075 + 'px',
            'left' : get_size('width') / 2 - 50 + 'px'  
        }).append('<span class="arrow back"></span><span class="close"></span><span class="arrow forward"></span>');

        $j('.arj-caption').css({
            'bottom' : get_size('top') * .075 + 'px',
            'left' : get_size('width') * .125 + 'px',
            'width' : get_size('width') * .75 + 'px'
        });

        $j('.close').click(function(){
            $j('.arj-lightbox-con').css('display', 'none');
            $j('.arj-controls').remove();
            $j('.arj-caption').remove();
        });

        var $onClickSrc = next($j(this).parent().index());

        $j('.arj-lightbox-con').append('<img src="' + $onClickSrc + '" alt="arj-lightox" />');

        $j('.arj-lightbox-con img').css({
            'width' : $clckdImage.css('width'), 
            'height' : $clckdImage.css('height'),
            'top': $offset.top,
            'left': $offset.left,
            'right': $offset.right,
            'position':'absolute', 
            'z-index':'200',
        }).animate({
            top : get_size('top') * .075 + 'px',
            left : get_size('width') * .125 + 'px',
            width : get_size('width') * .75 + 'px', 
            height : get_size('height') * .85 + 'px'
        }, 250, function(){
            $j('.arj-controls').fadeIn();
            $j('.arj-caption').fadeIn();
        });

        $j('.forward').click(function(){
            var $nextForwardSrc = next(curIndex() + 1, 1);
            var $newImage =  '<img src="' + $nextForwardSrc + '" alt="arj-lightox" />';
            $j('.arj-lightbox-con').append($newImage);
            $j('.arj-lightbox-con img').css($imgStyle); 
        });

        $j('.back').click(function(){
            var $nextBackSrc = next(curIndex() - 1, -1);
            var $newImage =  '<img src="' + $nextBackSrc + '" alt="arj-lightox" />';
            $j('.arj-lightbox-con').append($newImage);
            $j('.arj-lightbox-con img').css($imgStyle);

        });
    }); 
});

Answer 1

您在arj.lightbox.js中的关闭功能是问题所在：

        $j('.close').click(function(){
        $j('.arj-lightbox-con').css('display', 'none');
        $j('.arj-controls').remove();
        $j('.arj-caption').remove();

您只是隐藏图像，将它们保存在记忆中，即使您将它们附加到身体上。因此，每个灯箱实例的内存消耗都会增加。

Answer 2

你的代码很糟糕，你正在做很多可以改进的事情。以下是灯箱代码的链接供参考：

http://trip.wtfmarketing.com/wp-content/themes/charleycoffee/arj.lightbox.js

        $j('.arj-lightbox-con').fadeIn().append('<div class="arj-controls"></div><div class="arj-caption"></div>');

看看这一行，有两个问题。一，每次点击某些内容时，您运行的是一个jQuery选择器，它会查找每个DOM节点，查找类名为“.arj-lightbox-con”的ANY元素。您可以通过将其分配给变量来缓存它。

但最糟糕的是你不断追求。您每次都会使.arj-lightbox-con的内容越来越长，并用图像填充它。当该元素消失时，即使您看不到它们，浏览器也会淡入灯箱中的数十个图像。你永远不会清楚它。这是一个简单的修复：

$j('.arj-lightbox-con').empty().fadeIn()... blah blah

常规调试提示：如果您使用Firebug检查过灯箱元素，您会看到图像堆积，并且可能有助于调试。

jQuery：animate（）在一系列触发器之后变慢了吗？

2 个答案: