0

高解像度の画像がいくつかあり、サイズを変更して小さくし、Web ページでアニメーション化する必要があります。ワイドモニターで高解像度にしたいので、画像エディタでリサイズしたくありません。画像のサイズを変更する方法をいくつか試しましたが、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」プラグインも使用してください。
画像のサイズ変更（）であるが、完全には問題がないという1つの問題があります.!私はそれを解決しようとしています!

于 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 ディスプレイのないもの用に半分のサイズのバージョンを作成し、フル バージョンを Retina 対応のクライアントにのみ提供することができます。これを行う簡単な方法については、retina.jsを調べてください。

于 2012-12-08T07:13:02.683 に答える