Проблема Google Chrome с Css и JScript

Я работаю над фотогалереей, где около 44 изображений в галерее на каждом снимке размером 300 КБ. Изображения скрыты css файлом, как показано ниже:

.koImg1
{
 display:none;

}
.koImg2
{
 display:none;

}

.koImg3
{
 display:none;

}

Вышесказанное является небольшим примером для вашего рассмотрения, на самом деле у меня скрыто 44 изображения, как указано выше. И анимируется так же, как и файл Jscript, как показано ниже.

$(document).ready(function(){
$("#Img1").hover(function(){
$("#kImg1").show();
$("#kImg1").animate({width:'765px',height:'435px'},1000);

});
$("#Img1").mouseleave(function(){
$("#kImg1").hide();

});
$("#Img2").hover(function(){
$("#kImg2").show();

$("#kImg2").animate({width:'765px',height:'435px'},1000);
});
$("#Img2").mouseleave(function(){
$("#kImg2").hide();
});
});

Я подробно расскажу о том, как я работаю:

<table style="width:100%; background-color:Black;"><tr><td style="width:100%">
<table style="width:800px; height:450px; margin-left:auto; margin-right:auto; border- style:solid; border-width:5px; border-color:Red;"><tr><td style="width:800px;  height:450px;">
<asp:Panel ID="Pnl1" runat="server" CssClass ="Pnl1" Width="780" Height="445" BorderStyle="solid" BorderWidth="5px" BorderColor="yellow">
<center>

    <asp:Image ID="kImg1" CssClass="koImg1" runat="server" ImageUrl="PAlbum/BMeet/Img1.jpg" Width="100" Height="100" BorderStyle="solid" BorderWidth="5px" BorderColor="white"  />
    <asp:Image ID="kImg2" CssClass="koImg2" runat="server" ImageUrl="PAlbum/BMeet/Img2.jpg" Width="100" Height="100" BorderStyle="solid" BorderWidth="5px" BorderColor="white"  />
    <asp:Image ID="kImg3" CssClass="koImg3" runat="server" ImageUrl="PAlbum/BMeet/Img3.jpg" Width="100" Height="100" BorderStyle="solid" BorderWidth="2px" BorderColor="white"  />

</center>
</asp:Panel>
</td></tr></table> //THIS TABLE IS THE CONTAINER OF DISPLAYS OF IMAGES

//AND BELOW TABLES IS THE HOVER TYPE DISPLAYS. MEANS THE BELOW TABLES CONTAINS 44    IMAGES
//IF I HOVER ON ONE IMAGES THAN IT WILL DISPLAYS THE SAME IMAGES IN ABOVE TABLE...

<table style="width:800px; height:110px; margin-left:auto; margin-right:auto;border- style:solid; border-width:5px; border-color:White;"><tr><td style="width:800px;  height:110px;">
    <asp:Panel ID="Panel1" runat="server" Width="780" Height="105" BorderStyle="solid"  BorderWidth="5px" BorderColor="green" ScrollBars="Auto">
    <asp:Image ID="Img1"  CssClass="Img1" runat="server"  ImageUrl="PAlbum/BMeet/Img1.jpg" Width="100" Height="100" BorderStyle="solid"  BorderWidth="2px" BorderColor="white"  />
    <asp:Image ID="Img2" runat="server" ImageUrl="PAlbum/BMeet/Img2.jpg" Width="100" Height="100" BorderStyle="solid" BorderWidth="2px" BorderColor="white"  />
    <asp:Image ID="Img3" runat="server" ImageUrl="PAlbum/BMeet/Img3.jpg" Width="100" Height="100" BorderStyle="solid" BorderWidth="2px" BorderColor="white"  />
</asp:Panel>
</td></tr></table>
</td></tr></table>

То же самое с 1 до 44 изображений. Он хорошо работает на локальном сервере и с Mozilla Firefox на производственном сервере. Это плохо работает с Google Chrome на рабочем сервере.

На локальном сервере Google Chrome работает хорошо, но на рабочем сервере он скрывает и анимирует только файлы с 1 по 26, но не файлы с 27 по 44.

Я думаю, что это может быть проблема изображений, требующих времени для загрузки на сервер. Не знаете, как победить?. Какова конкретная проблема и как ее преодолеть?