繁体   English   中英

使用Css和JScript的Google Chrome问题

[英]Google Chrome Issue With Css And JScript

我在照片库上工作,其中每个图像的大约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不兼容。

在本地服务器上,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代码是如何工作的,但我肯定认为你需要一个函数来处理所有的悬停状态。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM