textarea slow loading times

Question

I'm having long loading times when using a lot of textareas.

    <?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>

When $hold contains 1-10 it doesn't take that long to load, but when it has 50 or so it takes 8+ seconds to load.

Is there a faster way to load multiple textareas? Should I instead use AJAX to load them in one at a time so it appears seamless?

@JayBlanchard It's an associative array. I commented out the textarea boxes, and it ran smooth. So the problem is defintely coming from there. — Mathew, Nov 20 '14 at 02:09
Why do you create all those `$card_*****` variables, why do not use directly the `$value` array? It won't solve your problem, just i do not understand. — vaso123, Nov 21 '14 at 16:12
@lolka_bolka To keep things a little more organized. Is it problematic? — Mathew, Nov 21 '14 at 16:15
No, just really unnecessarey. You are not using them later, you are not manipulating them, so they are just wasting your memory. — vaso123, Nov 21 '14 at 16:18

score 1 · Accepted Answer · edited May 23 '17 at 12:16

Found a good answer that might solve your problem.

Take out elastic and replace it with this. Elastic can cause slow loading times in some browsers when there are many textareas.

  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

textarea slow loading times

1 Answers1