Page freezes after sending form - php

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 '<img src="' . $links[$i]['thumb'] . '" />' . "\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. <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.