BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

モバイルウェブの画像プリロード方式について簡単に紹介します。

2022-02-01 13:29:38

会社の業務上の必要性から、vueで作ったWebページはスマートホームのwifiに接続する必要がありますが、このwifiはインターネットには接続されておらず、あくまで携帯電話と家庭とのインターフェースとして使用されています。このため、この無線LANの下では、Webページがサーバーから画像を読み込むことができませんでした。

この点、vueのシングルページシステムでは、3つの選択肢を思いつきました。

1. 前のページで先に画像を読み込み、キャッシュしておき、後で壊れたページを取得する。

2. 上にルーティングコンテナがあり、その下に表示する必要があるすべての画像を保持するページを作成します。そうすれば、ページがロードされたときに画像がすべて表示され、上の子ルートは自然に画像を取得することができます。

3. 画像をbase64データに変換し、localStorageに保存します。

1番目と2番目のオプションは比較的簡単で、PCとAndroidプラットフォームでうまく機能します。しかし、iosでは表示されません。

(明らかに画像は下の方にあるのですが、上の方は表示されません)

おそらく、IOSのブラウザは、ニンジン1本ずつ画像を読み込んでいるのでしょう。それぞれの画像は読み込まれる前にサーバーにあるかどうか嗅ぎつけられ、存在していて変更されていなければキャッシュに表示され、見つからなければ単に404になるのだそうです。したがって、ブラウザベースのキャッシュ戦略は、切断された場合、理想的ではありません。したがって、3番目の選択肢を使う必要があります。まず、コードを掲載することから始めましょう。 

  /* Get the base64 code of the image
        * @param {obj}img image dom object
         */
        function getBase64Image(img) {
          let canvas = document.createElement("canvas");
          canvas.width = img.width;
          canvas.height = img.height;
          let ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0, img.width, img.height); //draw the same image
          return canvas.toDataURL("image/png"); //convert to base64 data
        }

画像をbase64形式に変換するのはcanvasで簡単にできます。あとは、sessionStorageに保存すれば完了です。画像を再表示するときは、imgのsrcプロパティにbase64データを設定するだけです。vueのプロジェクトでやったことは、base64を変換して保存するコンポーネントを作り、スロット内の画像をすべてbase64に変換し、imgタグにname属性を作ってsessionStorageのキーとして使い、次に表示コンポーネントとしてコンポーネントを作り（imgタグを一つだけ含む）、そのname属性と そして表示コンポーネントとしてコンポーネントを作り（imgタグを一つだけ含む）、そのname属性に該当画像と同じものを設定して、そのキーを使って、セッションストレージからbase64データを取得することだそうです。

コンポーネントを変換して保存する。 

  <! --image to be preloaded -->
    <save-img-base64>
      <img src=". /... /assets/img/connect/bind_xiaofang.png" name="bind_xiaofang"/>
      <img src="... /... /assets/img/connect/bind_allonePro.png" name="bind_allonePro"/>
      <img src="... /... /assets/img/connect/bind_S20.png" name="bind_S20"/>
      <img src="... /... /assets/img/connect/bind_S30.png" name="bind_S30"/>
      <img src="... /... /assets/img/connect/connectStart_xiaofang.png" name="connectStart_xiaofang"/>
      <img src="... /... /assets/img/connect/connectStart_allonePro.png" name="connectStart_allonePro"/>
      <img src="... /... /assets/img/connect/connectStart_S20.png" name="connectStart_S20"/>
      <img src="... /... /assets/img/connect/connectStart_S30.png" name="connectStart_S30"/>
      <img src="... /... /assets/img/connect/reset_xiaofang.png" name="reset_xiaofang"/>
      <img src="... /... /assets/img/connect/reset_allonePro.png" name="reset_allonePro"/>
      <img src="... /... /assets/img/connect/reset_S20.png" name="reset_S20"/>
      <img src="... /... /assets/img/connect/reset_S30.png" name="reset_S30"/>
      <img src="... /... /assets/img/connect/network_set.png" name="network_set"/>
      <img src="... /... /assets/img/connect/phone_wifi.png" name="phone_wifi"/>
      <img src="... /... /assets/img/connect/tmall.png" name="tmall"/>
    </save-img-base64>

表示部品です。 

<img-base64 name="network_set"></img-base64>

ブラウザのsessionStorageの場合。

から を使用できますか？ の表を見ると、最近のモバイルブラウザは基本的にcanvasと互換性があるので、安心して使えることがわかります。

以上が今回の内容の全てです。皆様の学習の一助となり、スクリプトハウスをもっと応援して頂ければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します