結論から述べますとブラウザアプリの高速化したいと考えております。
【現状の課題】
現在jqueryを使って4択クイズのサイトを構築しています。
※イメージ画像を添付致します
仕組みとして、正解の回答がクリックされたら
次の問題の画像を表示するという簡単な動作を以下のようなスクリプトで行っております。
$("div#bodyarea001").html("");
$("div#bodyarea001").append('<img src="http://xxx/wp-content/uploads/' + flag + '.jpg">');
この際に、3G回線を使うようなスマートフォンで実行すると
動作が非常に遅くなってしまいました。
画像一つのサイズが約80kbyteあり、その画像が100個程使われます。
【質問内容】
①これらの画像はappendが実行される際にロードされるのでしょうか?
②最初に全画像データをロードして、クイズ時の処理を軽くすることは可能でしょうか?
③上記②以外で処理を軽くする方法はあるのでしょうか?
目的としては、最初にも述べましたがブラウザアプリの高速化になります。
具体的なコードのサンプルや参考サイトなどがあるとより助かります。
不足している情報などがあればご指摘下さい。
お手数お掛け致しますがよろしくお願い致します
①これらの画像はappendが実行される際にロードされるのでしょうか?
普通のブラウザだと、そうなります。
全く同じ画像であれば、2回目は読み込みに行かないはずです。
②最初に全画像データをロードして、クイズ時の処理を軽くすることは可能でしょうか?
もし、画像のロードに時間がかかっているのが遅い原因だとしたら、軽くはできます。
が、その分、最初にがっつりと待たされます。
高速化とは、言えないでしょうね。
③上記②以外で処理を軽くする方法はあるのでしょうか?
まずは、画像を小さくしましょう。
選択肢の部分は、画像に含まれていないような気もしますが、とりあえず質問でアップロードされた画像を、JPEG で画質を落としてみました。
質問にアップされた元画像
サイズ:70036 バイト
画質 40 JPEG
サイズ:13936 バイト
画質 20 JPEG
サイズ:10267 バイト
画質 10 JPEG
サイズ: 7982 バイト
この程度の線画だったら、画質を落としても、十分だと思います。
因みに、画質を落とすのは Irfan View というソフトを使いました。
後、実物を見てないのであれなんですけど、体感の速度を上げるとしたら、ぼくだったら、次の質問の画像を先読みするように作ります。
クイズなので、質問を見ているときに、考えている時間があるはず。
その間に、次の画像を読み込みます。
div#bodyarea001 が、質問を表示する領域だとして、もうひとつ display:none にして見えない DIV を用意しておきます。
正解の回答がクリックされたら、見えない領域に読み込んだ次の画像を、div#bodyarea001 に表示して、その次の問題を見えない領域にロードします。
flag が問題の通番だとして、こんな雰囲気になると思います。
$("div#bodyarea001 img").attr("src", "http://xxx/wp-content/uploads/" + flag + ".jpg"); $("div#next_question img").attr("src", "http://xxx/wp-content/uploads/" + (flag + 1) + ".jpg");
IMG タグを消して書き換えるのではなく、src 属性だけを入れ替えれば十分です。
①これらの画像はappendが実行される際にロードされるのでしょうか?
普通のブラウザだと、そうなります。
全く同じ画像であれば、2回目は読み込みに行かないはずです。
②最初に全画像データをロードして、クイズ時の処理を軽くすることは可能でしょうか?
もし、画像のロードに時間がかかっているのが遅い原因だとしたら、軽くはできます。
が、その分、最初にがっつりと待たされます。
高速化とは、言えないでしょうね。
③上記②以外で処理を軽くする方法はあるのでしょうか?
まずは、画像を小さくしましょう。
選択肢の部分は、画像に含まれていないような気もしますが、とりあえず質問でアップロードされた画像を、JPEG で画質を落としてみました。
質問にアップされた元画像
サイズ:70036 バイト
画質 40 JPEG
サイズ:13936 バイト
画質 20 JPEG
サイズ:10267 バイト
画質 10 JPEG
サイズ: 7982 バイト
この程度の線画だったら、画質を落としても、十分だと思います。
因みに、画質を落とすのは Irfan View というソフトを使いました。
後、実物を見てないのであれなんですけど、体感の速度を上げるとしたら、ぼくだったら、次の質問の画像を先読みするように作ります。
クイズなので、質問を見ているときに、考えている時間があるはず。
その間に、次の画像を読み込みます。
div#bodyarea001 が、質問を表示する領域だとして、もうひとつ display:none にして見えない DIV を用意しておきます。
正解の回答がクリックされたら、見えない領域に読み込んだ次の画像を、div#bodyarea001 に表示して、その次の問題を見えない領域にロードします。
flag が問題の通番だとして、こんな雰囲気になると思います。
$("div#bodyarea001 img").attr("src", "http://xxx/wp-content/uploads/" + flag + ".jpg"); $("div#next_question img").attr("src", "http://xxx/wp-content/uploads/" + (flag + 1) + ".jpg");
IMG タグを消して書き換えるのではなく、src 属性だけを入れ替えれば十分です。
a-kuma3さん
いつも回答ありがとう御座います。
画像の圧縮はなんとなく考えていたのですが
回答している時に次の問題の画像を読み込んでおくという事は
まったく思いつきませんでした。
ありがとうございます。確認してみます。
おおむねa-kuma3さんがお答えになっていますので、細かい補足です。
画像圧縮は無劣化でもファイルサイズを落とす方法が色々あります。試しに https://compressor.io/ を利用してみました。
pngのまま、70,036 バイト→19,550 バイトになりました。
このあたりでライセンスとの兼ね合いを見てみて下さい。 google:画像 無劣化 圧縮
上に挙げられているように先読み(プリフェッチ)以外だと、ロード自体を遅延させる方法があります。実装の方式によると思いますが、jQueryだとjQuery.lazyload
プラグインがあるので検討なさってみて下さい。
導入例がこちらです。PC/スマホ共に、読むまで画像を出さないようにしています。
ただ、クイズのような画面ではあまり使いどころが無いかもしれません。
のろまんばさん
回答ありがとうございます。
無劣化での圧縮方法があるとは知りませんでした。
有料のソフトでも良いものがあれば購入を検討致します。
取り急ぎお礼まで。
他の方の回答で解決出来ているので、画像圧縮について記載させていただきます。
PNGoo(pngquant)というソフトでPNGの色数を減らすことでサイズを小さく
することができます。GPLのため無償で使えます。
http://www.forest.impress.co.jp/docs/review/20140228_637513.html
http://pngquant.org/
参考ですが、掲載されているイラストを8色にした場合約6KBになりました。
cnoさん
お返事が遅くなりました。
このツールですが以下の理由で私の欲しい機能にベストマッチでした。
1.色数を変える事で圧縮率を変える事が出来る
2.一度に複数の画像の処理が出来る
非常に満足しております。紹介して頂いてありがとうございます。
hossiiiiさんこんにちは。お役に立てて何よりです。jQueryなど外部のライブラリはCDNを活用するのも効果的です(多くの場合gz圧縮対応のため、ご利用のWebサーバが未対応の場合は特に)。よければご参考ください。
https://developers.google.com/speed/libraries/devguide#jquery
a-kuma3さん
2014/10/28 15:10:35いつも回答ありがとう御座います。
画像の圧縮はなんとなく考えていたのですが
回答している時に次の問題の画像を読み込んでおくという事は
まったく思いつきませんでした。
ありがとうございます。確認してみます。