長い説明のために前もってお詫び申し上げます。これが一番描きやすいと思います！:P
お互いの上に絶対 (css) で配置された 10 個の div があるとします。各 div には複数の透明な png が含まれており、それらが互いに重なり合って視覚的な全体を形成しています。一度に 1 つの div のみを表示し、ユーザーは矢印またはボタンをクリックして次の div に切り替えることができます。この矢印/ボタンには、次に表示する div を示すタグが含まれているため、javascript を使用してすべての div を非表示にし、その直後に適切な div を表示します。
ほとんどのブラウザでこれが遅いのはなぜですか? このようなことを行うためのより良いアプローチはありますか? IE と Firefox は div をかなり高速かつスムーズに切り替えているようですが、Chrome では遅延が見られます。html と javascript の概要は次のとおりです。
HTML:
<div id="div1" class="active generic">
<img src="sample00.png" width="1000" height="564" class="a1" />
<img src="sample01.png" width="1000" height="564" class="a2" />
<img src="sample02.png" width="1000" height="564" class="a3" />
<img src="sample03.png" width="1000" height="564" class="a4" />
<img src="sample04.png" width="1000" height="564" class="a5" />
</div>
<div id="div2" class="generic">
<img src="sample05.png" width="1000" height="564" class="a1" />
<img src="sample06.png" width="1000" height="564" class="a2" />
<img src="sample07.png" width="1000" height="564" class="a3" />
<img src="sample08.png" width="1000" height="564" class="a4" />
<img src="sample09.png" width="1000" height="564" class="a5" />
</div>
等々...
Javascript:
a++;
var gen = $('.generic');
var div = $('#div' + a);
gen.hide().removeClass('activeFrame');
div.show().addClass('activeFrame');
誰もがより良い解決策を提供するには、おそらくあまりにも曖昧です。しかし、一部のブラウザ/ローエンド システムでこれが遅い理由と、それを修正する方法を誰かが説明できれば、その知識を使って自分で何かを考えることができます (または、それがそのままの方法であることを受け入れることができます)。 .