本文介绍了background-size:涵盖性能问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在使用 background-size:cover 的大量元素时遇到性能问题(特别是在Safari中)。我添加了 transform:translate3d(0,0,0)这有点帮助,但不是我想要的。我真的寻找一个纯CSS修复,如果可能的话。

I'm having performance issues (especially in Safari) with using a large number of elements with background-size: cover. I've added transform: translate3d(0,0,0) which did help a little, but not as much as I'd like. I'm really looking for a pure css fix if possible.

推荐答案

jsFiddle Demo

code> background-size:cover 的性能非常糟糕。我已经发现很多问题,使用它之前,并放弃了它赞成这种方法。

background-size:cover has terrible performance across the board. I have found many issues with using it before, and have abandoned it in favor of this approach.

使用一个图像里面的div,尺寸div的尺寸希望使用。具有如此大小的图片:

Use an image inside of the div, size the div to the dimensions you wish to use. Have the image sized as such:

left:0;
right:0;
top:0;
bottom:0;
position:relative;
width:100%;
height:100%;

直接将正在加载的图像的网址分配给 src =url

And directly assign the url of the image being loaded to src="url".

你甚至可以看到这个艰难的测试,它确实很好(即使在safari测试 - jQuery用于简洁的演示)

You can see even with this strenuous test that it does just fine (even when tested in safari - jQuery used for brevity in demo)

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);

这篇关于background-size:涵盖性能问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-18 11:53
查看更多