html - CSS の配置 - 負荷の問題を修正する方法

Question

ホームページに 2 つの CSS ボタンがあり、画像に対して絶対位置を指定しています。私が抱えている問題は、画像よりもはるかに速く読み込まれることです。そのため、ページを読み込むと一瞬、画像が読み込まれるまでボタンがララランドに浮かび上がり、ラインに収まります。

これに対する簡単な修正はありますか、それともポジショニングを完全にやり直す必要がありますか?

Answer 1

<img ... width="xxx" height="yyy">画像要素で幅と高さの属性を使用していますか？これにより、ブラウザは画像の「スペースを確保」し、画像が読み込まれる前にそのサイズを知ることができます。画像に関連して何かを描くことができるように、これが必要です。

Answer 2

最も簡単なのは、最初にボタンを非表示にし (display:none)、javascript/jquery を使用して onload を表示することです。

jQueryの例は次のとおりです。

$('#ImgReferenced').on('load',function(){
    $('input[button]').show();
});

しかし、onload イベントハンドラーを使用して JavaScript で同じことを行うことができます。