我在使用background-size: cover
的大量元素时遇到了性能问题(特别是在Safari中)。我添加了transform: translate3d(0,0,0)
,它确实有所帮助,但没有我想要的那么多。如果可能的话,我真的在寻找一个纯粹的CSS修复程序。
答案 0 :(得分:5)
的 jsFiddle Demo
强> 的
background-size:cover
全面表现糟糕。我之前发现了许多使用它的问题,并且已经放弃了这种方法。
使用div内部的图像,将div的大小调整为您要使用的尺寸。将图像大小如此:
left:0;
right:0;
top:0;
bottom:0;
position:relative;
width:100%;
height:100%;
并直接将正在加载的图片的网址指定为src="url"
。
即使经过这项艰苦的测试,你也可以看到它做得很好(即使在safari中进行测试 - 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);