Google Chrome 问题与 css 和 JScript

Google Chrome Issue With Css And JScript

本文关键字：JScript css Chrome 问题 Google      更新时间：2023-09-26

我在照片库工作，其中画廊中大约有 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。

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

我是否正确，您有 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 代码是如何工作的，但我肯定认为您需要一个函数来处理所有悬停状态。

相关文章：