で多数の要素を使用すると、(特に Safari で) パフォーマンスの問題が発生しbackground-size: cover
ます。少しは役に立ちましtransform: translate3d(0,0,0)
たが、私が望むほどではありませんでした。可能であれば、純粋なCSSの修正を本当に探しています。
質問する
3024 次
1 に答える
5
background-size:cover
全体的にひどいパフォーマンスをしています。私は以前にそれを使用することで多くの問題を発見し、このアプローチを支持して放棄しました.
div 内の画像を使用し、使用したいサイズに div のサイズを変更します。画像のサイズを次のようにします。
left:0;
right:0;
top:0;
bottom:0;
position:relative;
width:100%;
height:100%;
そして、読み込まれている画像の URL を に直接割り当てsrc="url"
ます。
この精力的なテストでも、うまくいくことがわかります(サファリでテストした場合でも-デモでは簡潔にするためにjQueryを使用しています)
var place = "http://placehold.it/";
var all = $("<div>");
for( var w = 5; w < 100; w++ ){
for( var h = 5; h < 100; h++ ){
var nwln = $('<div>');
var img = $('<img class="sq">');
nwln.width(w*2);
nwln.height(h*2);
var url = place + w + "x" + h;
img[0].src = url;
nwln.append(img);
all.append(nwln);
}
}
$("#grid").append(all);
于 2013-10-21T19:30:29.233 に答える