Question

I have a script that has the following content:

    <?php
if(isset($_POST['sent-urls']) || $_POST['sent-urls'] == true)
{
    session_start();
    error_reporting(E_ALL);
    //ini_set('display_errors', 'Off');

    include('includes/functions.php');

    $url = str_replace('www.', '', url());
    $images = explode("\n", $_POST['remote-urls']);

    if(sizeof($images) > 30) {
      $url_i = $url_t = $direct = 'You have added mroe than 30 links';
    }

    $links = array();
    foreach($images as $image) 
    {
      $srcfile = (isset($image)) ? trim($image) : '';
      $extension = remoteEx($srcfile);
      $filename = rand(124588, 543354) . '.' . remoteEx($image);
      $file = remote_filesize($srcfile);

      if ($file <= 3000000 && !empty($srcfile) && $extension == 'png' || $extension == 'peg' || $extension == 'jpg' || $extension == 'gif' || $extension == 'bmp')
      {
        $copied = copy($srcfile, 'i/' . $filename);

        $direct = $url . 'i/' . $filename;
        $url_i = $url . 'i/' . $filename . "\n";

        if ($copied)
        {
            // make_thumb($direct, 't/' . $filename, 150, remoteEx($direct));   
            generate_thumbnail($image, $filename, 110, 110, true, 'file', false, false, '');
            $url_t = $url . 't/' . $filename . "\n";
        }
      }
      else if (empty($srcfile))
      {
        $url_i = $url_t = $direct = 'No links added';  
      }
      else if ($file > 3000000)
      {
        $url_i = $url_t = $direct = 'Maximum size of photos exceed';  
      }
      else 
      {
        $url_i = $url_t = $direct = 'There was an error while submitting the form';  
      }

      $links[] = array('direct' => $direct, 'thumb' => $url_t);
    }

    if ($file > 3000000) { echo 'You have exceed the limit of the file size'; } 
        echo '<br /><br />';
        echo '<div id="links">';
        echo '<table>';
        echo "<tr><td><span class=\"green\">Direct:</span> <textarea class=\"link-area\" readonly=\"readonly\" onMouseOver=\"this.focus(); this.select(); $(this).css('height', '50px');\" onmouseout=\"$(this).animate({ height: '25px' }, 'fast'); $(this).blur();\">";
        for($i = 0; $i < count($links); $i++) { echo $links[$i]['direct'] . "\n"; }
        echo '</textarea></td></tr>';

        echo "<tr><td><span class=\"green\">Thumbnail:</span> <textarea class=\"link-area\" readonly=\"readonly\" onMouseOver=\"this.focus(); this.select(); $(this).css('height', '50px');\" onmouseout=\"$(this).animate({ height: '25px' }, 'fast'); $(this).blur();\">";
        for($i = 0; $i < count($links); $i++) { echo $links[$i]['thumb'] . "\n"; }
        echo '</textarea></td></tr>';

        echo "<tr><td><span class=\"green\">BBCode:</span> <textarea class=\"link-area\" readonly=\"readonly\" onMouseOver=\"this.focus(); this.select(); $(this).css('height', '50px');\" onmouseout=\"$(this).animate({ height: '25px' }, 'fast'); $(this).blur();\">"; 
        for($i = 0; $i < count($links); $i++) { echo '[IMG]' . $links[$i]['direct'] . '[/IMG]' . "\n"; } 
        echo '</textarea></td></tr>';

        echo "<tr><td><span class=\"green\">HTML:</span> <textarea class=\"link-area\" readonly=\"readonly\" onMouseOver=\"this.focus(); this.select(); $(this).css('height', '50px');\" onmouseout=\"$(this).animate({ height: '25px' }, 'fast'); $(this).blur();\">";
        for($i = 0; $i < count($links); $i++) { echo '<a href="' . $links[$i]['direct'] . '"><img src="' . $links[$i]['thumb'] . '" /></a>' . "\n"; }
        echo '</textarea></td></tr>';

        echo '</table>';
        echo '<script type="text/javascript" src="scripts/img.core.js"></script>';
        echo '<script type="text/javascript" src="scripts/jquery-1.5.js"></script>';
        echo '<input type="reset" id="resetbtn-remote" class="button-sub" value="Reset" />';
        echo '<br />';
        echo '</div>';
}
else 
{
    header('Location: index.php');  
}
?>

And the script gets called by this form:

<div id="remote" style="display: none;">
    <form action="remote.php" method="post" id="remote-upload">
        <br /><br />
        <textarea name="remote-urls" id="remote-urls" rows="12"></textarea><br/>
        <input type="button" name="remote-start" id="remote-start" class="remote-button" value="Upload Images" />
        <input type="hidden" name="sent-urls" value="1" />
        <input type="reset" id="remote-reset" class="remote-button" value="Reset" style="display: none;" />
        <br /><br />
        <span class="normal">
            Maximum <strong>20</strong> images.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>10 MB</strong> for one image.
        </span>
    </form>
        <div id="remoted">
            <img id="loader1" src="css/images/loader.gif" style="display: none;" />
        </div>
    </div>

The form is connected with a jQuery plugin that send data from a form without refreshing the page. I hit the #remote start button, loader shows, and after a few seconds the page freezes and becomes inaccessible for ~4 seconds, then the page unfreezes with the desired results.

What might be causing the page to freeze?

EDIT: The JavaScript is like this:

$('#remote-start').live('click', function() {
    $('#loader1').show();
    $(this).hide();
    $('#remote-reset').show();
    $('#remote-upload').ajaxSubmit({
        target: '#remoted',
        success: function(response) {
            $('#remoted').html(response).hide().slideDown('fast');
            $('#loader1').fadeOut('normal');
        }
    });
});

$('#remote-reset').live('click', function() {
    $('#remote-urls').empty();
    $('#remoted').slideUp('medium', function() {
        $(window.location).attr('href', 'http://localhost/imagehost');
    });
});

$('#resetbtn-remote').live('click', function() {
    $('#remote-urls').empty();
    $('#remoted').slideUp('medium', function() {
        $(window.location).attr('href', 'http://imgit.org');
    });
});

Answer 1

Hard to say but I’d guess that your “jQuery plugin that send data from a form without refreshing the page” is calling $.ajax with async:false:

Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

The plugin is using AJAX and the above excerpt from the $.ajax documentation sounds exactly like what you’re seeing.