私は自分のウェブサイトにいくつかの画像を積み重ねています (相対 DIV 内の絶対位置)。mousemove イベントでこれらの画像を切り替えるのが好きです。CSSクラスを追加/削除してみました。これはこれまでのところ機能します。ただし、Chrome のタイムラインでは、各イベントで「画像のデコード」と「画像のサイズ変更」を含むかなり長い再描画が見られます。「display:none」、「visibility:hidden」、「z-Index:0」など、さまざまな「非表示テクニック」で試してみました。表示や表示を切り替えても違いはありませんでしたが、zIndex バージョンはすべての画像が再描画されるため、非常に時間がかかりました。だから私はここで立ち往生しています。再描画をまったく行わずに可視性を切り替えるにはどうすればよいですか? 少なくとも画像のデコードは必要ないはず?! これは、JSでどのように行っているかを示すコードスニペットです。
var currentImgElem = document.getElementById(elem_id_curr);
var showImgElem = document.getElementById(elem_id_show);
currentImgElem.classList.add("hide");
showImgElem.classList.remove("hide");
一方、「隠す」は次のいずれかです。
display:none;
visibility:hidden;
z-Index:0;
もう1つの混乱：キャンバスに描画された画像でこれを行っているときは、すべて問題ありません!