2

クライアントページのあるasp.net（vb）Webサイトがあります。そのページには、いくつかの大規模なクライアントへのハイパーリンクのロゴがあります。各ロゴのサイズは同じです (w 207 h 119)。3列5行の画像なので、全部で15個のロゴです。

現在、画像は次のようにコーディングされていますが、asp 画像を削除して通常の画像のみを使用する必要があると考えています。

<td>
<asp:HyperLink ID="HyperLink15" runat="server" ImageUrl="~/images/clgm.jpg" 
NavigateUrl="http://www.gm.com" Target="_blank"    
itemprop="url">HyperLink</asp:HyperLink>
</td>
<td>
<asp:HyperLink ID="HyperLink16" runat="server" ImageUrl="~/images/clford.jpg" 
NavigateUrl="http://www.ford.com" Target="_blank" 
itemprop="url">HyperLink</asp:HyperLink>
</td>

15 のクライアントすべてについて、以下同様です。速度とパフォーマンスが向上しますか (これらの画像を 1 つの画像に分割すると、http 要求が減少しますか?その場合、これらの asp:hyperlinks と asp:images を通常の html リンクと画像に変更する必要がありますか?そして、どうすればよいでしょうか?私はそれらをスプライトしますか? 私は css があまり得意ではないので、この点に関して誰かが提供できる助けを本当に感謝しています。

必要に応じて、以下にそれらの外観を示します。ここでも、3 列 5 行です (ここでさらに混乱します)。

ここに画像の説明を入力

4

4 に答える 4

2

はい、スプライトは良いです。私の意見では、スプライト画像を作成することがほとんどの作業です。

ちょっとした CSS でスプライトにアクセスできるようになりました。作業例については、こちらを参照してください。 http://jsfiddle.net/DWy2W/

<style>
.sponsor{
    width:80px;
    height:50px;
    background-image: url(http://i.stack.imgur.com/m93cd.jpg);
}
.gm{
    background-position: 0px 0px;
}
.ford{
    background-position: -80px 0px;
}
.osi{
    background-position: -80px -50px;
}​
</style>
<a href="http://www.ford.com">
    <div class="sponsor ford"></div>
</a>
<a href="http://www.gm.com">
    <div class="sponsor gm"></div>
</a>
<a href="http://www.osi.com">
    <div class="sponsor osi"></div>
</a>​
于 2012-11-01T22:18:23.417 に答える
2

速度とパフォーマンスが向上しますか (これらの画像を 1 つの画像に分割すると、http 要求が減少しますか?

はい、それは一般的なパフォーマンスの向上です。1 つのイメージが読み込まれるのに対して、15 のイメージが読み込まれることは、全体的な HTTP 要求の大幅な節約になります。

その場合、これらの asp:hyperlinks と asp:images を通常の html リンクと画像に変更する必要がありますか?

その ASP コードには理由がありますか? 開発/運用サーバー間で HTML を変換していますか? そうでない場合は、単純な HTML リンクを処理する必要はあまりないと思うので、HTML に変換するための数ミリ秒の処理を節約できます。

そして、どうすればそれらをスプライトできますか？

CSS-Tricks.com には、優れたスプライト チュートリアルがあります。
A List Apart にも良いスプライトの記事があります。

一般に、次のようにします。

  1. 各IMGタグに次のような ID を付けます。id="logo-gm"
  2. CSS では、各スプライトに幅/高さを指定します (これは、コンテナー レベルで適用することで簡単になります)。
  3. 適切なロゴが表示されるように、各一意の ID にスプライト イメージの背景と位置を指定します。

CSS は次のようになりますが、実際の CSS のニーズはサイトのデザインによって異なります。

.logo-sprites img { 
  width: 207px, 
  height: 119px; 
}
#logo-gm{ 
  background: url(/path/to/img/logo-sprite.png) no-repeat 0 0; 
}
#logo-ford{ 
  background: url(/path/to/img/logo-sprite.png) no-repeat -207px 0; 
}

HTML は次のようになります。

<ul class="logo-sprites">
    <li><img id="logo-gm" alt="GM Logo" /></li>
    <li><img id="logo-ford" alt="Ford Logo" /></li>
    ...
</ul>

背景 CSS の場合:

background: url(/path/to/img/logo-sprite.png) no-repeat -207px 0;

これ-207pxは「x」値を表し、幅を差し引いて画像を次の仮想列に移動します。は02D 平面の 'y' 値を表し、高さを引いて次の行に移動します。左上隅から始まるのは点 (0,0) です。

それが役立つことを願っています！

于 2012-11-01T22:08:54.553 に答える
1

スプライトの数と画像の標準サイズを考えると、スプライトは間違いなく便利です。他の回答で述べたように、それは確かにあなたを傷つけるつもりはありません!

スプライトを生成するには、 http://spritegen.website-performance.org/のように利用可能なオンライン オプションがいくつかあります。

VS.NET では、 CssSpriteGenreatorまたはTalifun.web.CssSprite NuGetを使用できます。

于 2012-11-01T22:26:01.947 に答える
1

はい、http 要求の数を減らすことは間違いなく良い考えです。あなたの場合、スプライトを使用する場合、基本的に 15 の http リクエストを 1 に減らします。これにはイメージ タグを使用する必要はありません。div または li を使用し、background-image css プロパティを使用してイメージを指定できます。すべての要素には異なる css クラス名が必要で、各クラスには特定の背景位置が必要です。この記事をチェックしてください http://css-tricks.com/css-sprites/

于 2012-11-01T22:03:50.093 に答える