textarea медленное время загрузки

Question

У меня длительное время загрузки при использовании большого количества текстовых полей.

<?php 
    foreach($hold as $value){ 
     $card_key  = $value['card_key']; 
     $card_one  = $value['card_one']; 
     $card_two  = $value['card_two']; 
     $card_three = $value['card_three']; 
     echo '<li class="row_'.$card_key.'" value="'.$card_key.'"> 
     <p>'.$i.'.</p> 
     <button type="button" value="'.$card_key.'" tabindex="-1"></button> 
     <div class="edit_one"> 
      <textarea class="text1" maxlength="1000">'.$card_one.'</textarea> 
     </div> 
     <div class="edit_two"> 
      <textarea class="text2" maxlength="1000">'.$card_two.'</textarea> 
      <textarea class="text3" maxlength="1000">'.$card_three .'</textarea> 
     </div> 
     <div style="clear:both;"></div>'; 
     echo '</li>'; 
     $i++; 
    } 
    ?> 
    <script type="text/javascript" src="../../scripts/jquery.elastic.source.js"></script> 
    <script type="text/javascript"> 
     $('.edit_main textarea').elastic(); 
    </script> 

Когда $ трюма 1-10 это не займет много времени для загрузки, но если он имеет 50 или так занимает 8 + секунды, чтобы загрузить.

Есть ли более быстрый способ загрузки нескольких текстовых областей? Должен ли я использовать AJAX для загрузки их по одному за раз, чтобы он выглядел бесшовным?

Answer 1

Нашли хороший ответ, который может решить вашу проблему.

Извлеките эластичный материал и замените его на это. Эластичность может вызвать медленное время загрузки в некоторых браузерах, когда есть много текстовых областей.

function textarea_resize(e){ 
    $(e).css({'height':'auto'}).height(e.scrollHeight); 
    } 
    $('textarea').each(function(){ 
    textarea_resize(this); 
    }).on('input', function(){ 
    textarea_resize(this); 
    }); 

Creating a textarea with auto-resize