多くの小さな画像を扱うための非スプライトCSS/Javascript

こんにちは。私は、背景画像として使用される多数の小さな画像（おそらく数百）を含む1つの大きな画像を提供するウェブページの技術を探しています。特定のdivまたはliの場合多くの小さな画像を扱うための非スプライトCSS/Javascript

CSS spritesのジョブのように聞こえますが、スプライトは1つの画像を表示するために囲むdiv（またはボックス）に依存しています。

しかし、私が使用したい画像は、個々のスプライト画像（およびそれらの間に残すスペース）よりも任意の大きさの領域にあります。これは、まだ広く実装されていないようだが、CSS3のメディア断片の提案で扱われたケースである。

また、これらのimage hacksは役に立ちますが、追加のスパンを挿入することは問題ありません（または：機構の前に）。

もしそれを避けたいのであれば、これを巧妙なjavascriptで実現するテクニックはありますか？たとえば、1つの大きな画像をブラウザに送り、JavaScriptをメモリにスライスし、個々の画像を異なるCSSの背景ルールに割り当てる実用的なテクニックがありますか？

出典

2012-03-08 gwideman

IE <= 7をサポートする必要がない場合、擬似要素を使用している問題はどこですか？ – Christoph

これは確かに有効な質問です。私の主な嫌悪感は、何千ものDOM要素に複雑さのレイヤーを追加する前と、UIレスポンスでDOMエレメントに対処しなければならないjavascriptとCSSを使用することです。受け入れられるかもしれませんが、単純なDOMを維持するソリューションを見て、問題をDOMに押し込むのではなく、事前に計算しておく必要があります。 – gwideman

さらに、DOM要素がレイアウト上で他の近くの要素とやりとりする前に、どのように追加されたかについての複雑さが導入されています。その目的がliの背景イメージアイコンを保持することであれば、追加されたコンテナ要素は、様々なサイズ変更条件の下でliテキスト、補助的なulなどの残りの部分とうまくやります。おそらくそれはありますが、やはり複雑さを増すことを避ける代替手段を検討する価値があります。 – gwideman

data-urlを使用します。 1つの文字列データに多くのイメージをエンコードし、文字列内の個々のイメージをデコードします。

"data-url image sprite"を検索すると、さらに詳しい情報が得られます。

出典

2012-03-08 09:37:06 WaiLam

ええ、まあ、私はそれについて知らなかった。これは100種類のクラスとその画像のすべてのCSSをプログラムで生成する必要がありますが、これはおそらく正しい方法です。グーグルでは、このテクニックにはいくつかの欠点があることがわかります（CSSのサイズ、ブラウザーがそれを犯す間の遅延）。私の主な問題は、インライン・データがむしろ説明不能で、眼球によるトラブルシューティングが難しいことです。とにかく、それは確かに私の考えを持っています。ありがとう。 – gwideman

ちょうど考慮のために：データURLの使用は公平な量だけサイズを増加させます。 base64エンコーディングは元のイメージよりも約30％多いデータです。 – Christoph

はい、サイズの増加は分かりましたが、明らかに圧縮の大部分を元に戻しています。それにもかかわらず、私は100倍の16x16pxイメージファイルを1つのCSSファイルに置き換えても、2倍のサイズのファイルでもパフォーマンスが向上すると思います。まだ保守性の面では売られていませんが、確かに知りたいオプションです。 – gwideman

たとえば、1つの大きな画像をブラウザに送り、JavaScriptをメモリにスライスし、個々の画像を別のCSSバックグラウンドルールに割り当てる実用的なテクニックがありますか？近代的なブラウザで

画像をロードするHTML5 Canvasを使用することが可能であるべきであるが、第二のキャンバスにその部分をコピーし、data: URIで得られたスプライトを格納します。

出典

2012-03-08 09:37:23 Alnitak

おかげで、それは私が想像していたもののように聞こえる。これが試され評価された場所へのポインタ。方法を舗装するいくつかのサンプルのjavascriptももちろん優れています。 – gwideman

多くの小さな画像を扱うための非スプライトCSS/Javascript

答えて

関連する問題