Css 和 JScript 的 Google Chrome 问题

Question

我正在处理照片库，其中大约有 44 张图片，每张图片的大小为 300kb。 图片被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。

在本地服务器上，谷歌浏览器运行良好，但在生产服务器上，它只隐藏和动画文件 1 到 26，而不是文件 27 到 44。

我认为这可能是图像在服务器上加载需要时间的问题。不知道怎么克服？确切的问题是什么以及如何克服它？

Answer 1

您有 44 个相同代码的实例，我是否正确？如果是这种情况，您真的需要简化事情。您需要在问题中添加更多代码，以便人们可以看到事情的组织方式。

首先对于 CSS 类，为什么不向所有图像添加一个类，而必须这样做 .koImg1, .koImg2, .koImg3 ...{display none} 你只需这样做：

.hiddenImg{
   display:none;
}

并在 html 中将该类添加到每个图像中

<asp:Image ID="kImg2" CssClass="koImg2 hiddenImg" runat="server" ImageUrl="PAlbum/BMeet/Img2.jpg" Width="100" Height="100" BorderStyle="solid" BorderWidth="5px" BorderColor="white"  />

并将其添加到您需要隐藏的所有容器中。

我不确定您编辑的 ASP 代码是如何工作的，但我肯定认为您需要一个函数来处理所有悬停状态。