質問: 画像要素が多いサイトの場合、 面がキービジュアルや商品画像などの大きい画像やパーツのような小さな画像無造作に置かれているように見えます。 一瞬だけなのですが、結構圧迫感が出てしまいます。 私の場合、下記のように処理でマスクして、用意ができたら外すという処理をしていました。 (考え方が古くて恐縮ですが)jsを使わないユーザーの対策をしろと言われた時代からの名残です...。 1. document.ready()の段階で全体に単色divを展開。 2. window.onload()でそのDivを隠す `document.ready`でマップをかけるため、かける数秒前の要素は見えてしまいごちゃごちゃしてしまいます、 しかし、色々なサイトを見ても最初にごちゃごちゃしていません。 最初にマスクをする事も考えるのですが、サイトに関係ない要素を置くのはいいのかなと、ひねくれた事を考えてしまいがちですが、 実際のところはどのように実装しているのでしょうか? vueやreactのようなヴァーチャルドムはできそうですが、静的に書いたHTMLでそういう事をやる場合はどうするのが良いのでしょうか?
回答: 1. 隠しておきたい領域をdivで囲み、そのdivを最初は非表示とする。 2. window.onload()で、上記のdivを表示する。 上記のやり方ですと、現在のマスクをかけているやり方と近い動きになるかと思います。 ただ、自身の環境で検証したところ、Handsontableで生成しているテーブルの描画がおかしくなりました。(Handsontableでテーブルを生成する前に、div要素を表示すれば、大丈夫でした。) 検証の際は、少し注意をお願いします。 静的に書いたHTMLとのことですので、大丈夫だとは思いますが。