ネット速度の違いについて

ヒント：このヒントを見ると、現在の記事が元のemlogブログシステムから移行されたことを意味します。記事の公開日が古すぎて、レイアウトや内容が完全ではないかもしれませんので、ご了承ください`

ネット速度の違いについて

日付：2020-11-7 阿珏 HTML ビュー：931 回コメント：6 件

ネット速度の違いについて

インターネットの普及とともに、ユーザーは応答速度の重要性にますます注意を払っています。ウェブサイトが速ければ、ユーザーの粘着性と変換率も高くなります。

要するに、速度を向上させる必要があります！ウェブサイトの速度に影響を与える要因はたくさんあります、例えば......................

真面目なことは私のスタイルではありません、以下は私のパフォーマンスです

アイデアの起源#

最初のアイデアは、純粋なCSSを使用して、ベース画像をbase64エンコードして、background-imageに直接配置することで、背景画像とウェブページを同時にロードする効果を実現することでした。

ステップ 1：#

事前に準備した素材画像を処理し、水着とスイムスカートを取り外す

ステップ 2：#

新しい HTML ファイルを作成する

ステップ 3：#

<div class="裸体">
    <div class="泳衣" id="泳衣"></div>
    <div class="泳裙" id="泳裙"></div>
</div>

完了。。

その後、問題が発生しました。ベース画像のファイルサイズが 12 メガバイトに達し、エンコード後の文字列が大きすぎるため、ウェブページの読み込みが遅くなります。ユーザーエクスペリエンスが悪くなります。また、この方法でロードされるベース画像は突然表示され、唐突すぎて効果がありません。

後で変更：#

CSS + JavaScript を使用して実装し、background-image を直接ロードして背景画像を徐々に表示する効果を得ることができます。ベース画像の読み込みが完了した後に、JavaScript で動的に画像を挿入します。

window.onload = function(){
    var img=new Image();
    img.src='裸体.jpg';
    if(img.width==0){
        alert('画像の読み込みに失敗しました')
    }else{
        document.getElementById("泳衣").style.backgroundImage="url(泳衣.png)";
        document.getElementById("泳裙").style.backgroundImage="url(泳裙.png)";
    }
}