0

我有一些高分辨率图像，必须将其重新调整为更小并在网页上对其进行动画处理。我不想在图像编辑器上重新调整它，因为我想在宽显示器上获得高分辨率。我尝试了几种方法来重新调整图像大小，但 Firefox 仍然存在性能问题。在调整大小的图像动画时，CPU 上升到 90%，内存占用高达 500mb。以下方法无助于提高性能，重新调整图像大小的常见最佳方法是什么？

<img id='picture' src='picture.png'>
#picture{width:50px;height:50px}

或者

<div id='picture'></div>
#picture{display:block;width:50px;height:50px;background:url('picture.png');background-size:100%}

或者

<div id='picture'></div>
#picture{display:block;background:url('picture.png');background-size:100%;-moz-transform:scale(0.5);}
4

2 回答 2

0

所以试试这个（这是我测试并给出答案的例子）

HTML  


<button id="go1">» Animate Block1</button>
  <div id="block1"></div>

CSS

div { 
    background-image:url(Desert.jpg); 
    width:542px;
    height:351px;
    border:2px solid green;
  }

脚本 

$(document).ready(function(){
    $("#go1").click(function(){
      $("#block1").animate( { width:"1004px" }, { queue:false, duration:3000 } )
         .animate( { height:"687px" }, { queue:false, duration:3000 } )   
    });
  });

也使用“jquery-latest.js”插件。
只是有一个问题是 resize() 图像但没有完全.！我试图解决这个问题！

于 2012-12-08T05:51:44.480 回答
0

我认为这里最好的选择是做你已经做过的事情：

HTML

<div class="huge_image">
</div>

CSS

.huge_image {
  width: 500px;
  height: 300px;
  background: url("/images/massive_image.jpg");
  background-size: 500px 300px;
}

如果性能真的那么差，你可以为那些没有视网膜显示器的人创建一个半尺寸的版本，只为支持视网膜的客户提供完整版本。查看retina.js以获得一个简单的方法来做到这一点。

于 2012-12-08T07:13:02.683 回答