Проблема производительности показать / скрыть несколько делений

Question

У меня довольно обширный список названий и определений, к которым применяется эффект «показать / скрыть». Я предполагаю из огромного количества текста и предметов, скорость, с которой это происходит, почти болезненна. Изначально я использовал код из другого источника, так что это не моя работа. Я знаю, что ссылка «читать дальше», которая запускает эффект, устанавливается после загрузки страницы… это может быть еще одной причиной моей проблемы. Я не совсем уверен, что это нужно структурировать таким образом, но я здесь новичок и могу полагаться только на логику в моих текущих методах устранения неполадок.

СКРИПТ

$(function(){
    var slideHeight = 36; // px
     $('.jswrap').each(function(){
        var defHeight = $(this).height();
        if(defHeight >= slideHeight){
            $(this).css({'height':slideHeight,'max-height': defHeight});
            $(this).after($('<div class="jsreadmore"><a href="#">Read More</a></div>'));
        }

        $('.jsreadmore a').click(function(){
            var $targetSlide = $(this).parent().prev(),
                curHeight = $targetSlide.height(),
                defHeight = $targetSlide.css('max-height');
            if(curHeight == slideHeight){
                $targetSlide.animate({
                  height: defHeight
                }, "normal");
                $targetSlide.next().children('a').html('Close');
            }else{
                $targetSlide.animate({
                  height: slideHeight
                }, "normal");
                $targetSlide.next().children('a').html('Read More');
            }
            return false;
        });
    });
 });

HTML

 <div class="jscontainer">
    <h4>Other Procedures</h4>
        <div class="jswrap">
        <p>content</p>
            <p>more content</p>
            <p>more content</p>
    </div></div>

`

CSS

.content_sub1 .jscontainer {margin:0 auto;}
.content_sub1 .jscontainer h2 {font-size:20px;color:#0087f1;}
.content_sub1 .jswrap {position:relative; padding:10px; overflow:hidden;}
.content_sub1 .jsgradient {width:100%;height:35px; position:absolute; bottom:0; left:0;}
.content_sub1 .jsreadmore {padding:5px; color:#333; text-align:right;}
.content_sub1 .jsreadmore a {padding-right:22px; font-weight:bold; font-size:12px; text-transform: uppercase; color:#c44;  font-family:arial, sans-serif;}
.content_sub1 .jsreadmore a:hover {color:#000;}

ССЫЛКА НА СТРАНИЦУ

http://www.doctorhtiller.com/procedures.html

Answer 1

Свяжите обработчик событий вне jQuery каждого цикла, иначе вы будете привязывать один и тот же прослушиватель событий ко всем элементам «read more», доступным в настоящее время в DOM, снова и снова, пока цикл не завершится.

Как это:

$(function(){
    var slideHeight = 36;

    $('.jswrap').each(function(){
        var defHeight = $(this).height();

        if(defHeight >= slideHeight){
            $(this).css({'height':slideHeight,'max-height': defHeight});
            $(this).after($('<div class="jsreadmore"><a href="#">Read More</a></div>'));
        }
    });

    $('.jsreadmore a').click(function(){
        var $targetSlide = $(this).parent().prev(),
            curHeight = $targetSlide.height(),
            defHeight = $targetSlide.css('max-height');

        if(curHeight == slideHeight){
            $targetSlide.animate({
                height: defHeight
            }, "normal");
            $targetSlide.next().children('a').html('Close');
        }else{
            $targetSlide.animate({
                height: slideHeight
            }, "normal");
            $targetSlide.next().children('a').html('Read More');
        }
        return false;
    });
});

Answer 2

Вы можете сделать еще один шаг вперед и превратить его в делегата следующим образом:

$('.jsreadmore').delegate('a', 'click', function(){
    var $targetSlide = $(this).parent().prev(),
        curHeight = $targetSlide.height(),
        defHeight = $targetSlide.css('max-height');

    if(curHeight == slideHeight){
        $targetSlide.animate({
            height: defHeight
        }, "normal");
        $targetSlide.next().children('a').html('Close');
    }else{
        $targetSlide.animate({
            height: slideHeight
        }, "normal");
        $targetSlide.next().children('a').html('Read More');
    }
    return false;
});

То, что вы покупаете, так это то, что у вас буквально есть один обработчик событий под капотом, который обрабатывает все "а" и должен динамическисоздать больше, делегат уже будет обрабатывать их в отличие от обработчика кликов.

Answer 3

Любой браузер будет перегружен, когда в DOM будет множество элементов. Самый простой способ, который я знаю, - это не загружать их все в DOM сразу, а загружать их только по мере необходимости с помощью ajax. Вы также можете делать такие вещи, как загружать их динамически при прокрутке страницы. Вы также можете удалить элементы из DOM, как только закончите с ними, но некоторые браузеры не так хорошо удаляют их из памяти и могут продолжать отключать браузер.