0

私は、ギャラリー内の約 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 はアニメーション化しません。

サーバーへの画像の読み込みに時間がかかる問題ではないかと思います。克服する方法がわからない？正確な問題とそれを克服する方法は何ですか?

4

1 に答える 1

2

同じコードのインスタンスが 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 コードがどのように機能するかはわかりませんが、すべてのホバー状態を処理するには 1 つの関数が必要だと思います。

于 2013-11-13T08:20:37.333 に答える