1414420113 jqueryについて質問があります。


結論から述べますとブラウザアプリの高速化したいと考えております。

【現状の課題】
現在jqueryを使って4択クイズのサイトを構築しています。
※イメージ画像を添付致します

仕組みとして、正解の回答がクリックされたら
次の問題の画像を表示するという簡単な動作を以下のようなスクリプトで行っております。

$("div#bodyarea001").html("");
$("div#bodyarea001").append('<img src="http://xxx/wp-content/uploads/' + flag + '.jpg">');

この際に、3G回線を使うようなスマートフォンで実行すると
動作が非常に遅くなってしまいました。

画像一つのサイズが約80kbyteあり、その画像が100個程使われます。

【質問内容】
①これらの画像はappendが実行される際にロードされるのでしょうか?
②最初に全画像データをロードして、クイズ時の処理を軽くすることは可能でしょうか?
③上記②以外で処理を軽くする方法はあるのでしょうか?

目的としては、最初にも述べましたがブラウザアプリの高速化になります。
具体的なコードのサンプルや参考サイトなどがあるとより助かります。
不足している情報などがあればご指摘下さい。

お手数お掛け致しますがよろしくお願い致します

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2014/10/27 23:28:33
  • 終了:2014/11/01 12:13:24

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4412ベストアンサー獲得回数18032014/10/28 00:46:20

ポイント200pt

①これらの画像はappendが実行される際にロードされるのでしょうか?

普通のブラウザだと、そうなります。
全く同じ画像であれば、2回目は読み込みに行かないはずです。

②最初に全画像データをロードして、クイズ時の処理を軽くすることは可能でしょうか?

もし、画像のロードに時間がかかっているのが遅い原因だとしたら、軽くはできます。
が、その分、最初にがっつりと待たされます。
高速化とは、言えないでしょうね。

③上記②以外で処理を軽くする方法はあるのでしょうか?

まずは、画像を小さくしましょう。

選択肢の部分は、画像に含まれていないような気もしますが、とりあえず質問でアップロードされた画像を、JPEG で画質を落としてみました。

f:id:a-kuma3:20141028001054p:image:w300:left質問にアップされた元画像
サイズ:70036 バイト

f:id:a-kuma3:20141028001051j:image:w300:left画質 40 JPEG
サイズ:13936 バイト

f:id:a-kuma3:20141028001049j:image:w300:left画質 20 JPEG
サイズ:10267 バイト

f:id:a-kuma3:20141028001047j:image:w300:left画質 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 属性だけを入れ替えれば十分です。

id:hossiiii

a-kuma3さん

いつも回答ありがとう御座います。
画像の圧縮はなんとなく考えていたのですが
回答している時に次の問題の画像を読み込んでおくという事は
まったく思いつきませんでした。

ありがとうございます。確認してみます。

2014/10/28 15:10:35

その他の回答(2件)

id:a-kuma3 No.1

a-kuma3回答回数4412ベストアンサー獲得回数18032014/10/28 00:46:20ここでベストアンサー

ポイント200pt

①これらの画像はappendが実行される際にロードされるのでしょうか?

普通のブラウザだと、そうなります。
全く同じ画像であれば、2回目は読み込みに行かないはずです。

②最初に全画像データをロードして、クイズ時の処理を軽くすることは可能でしょうか?

もし、画像のロードに時間がかかっているのが遅い原因だとしたら、軽くはできます。
が、その分、最初にがっつりと待たされます。
高速化とは、言えないでしょうね。

③上記②以外で処理を軽くする方法はあるのでしょうか?

まずは、画像を小さくしましょう。

選択肢の部分は、画像に含まれていないような気もしますが、とりあえず質問でアップロードされた画像を、JPEG で画質を落としてみました。

f:id:a-kuma3:20141028001054p:image:w300:left質問にアップされた元画像
サイズ:70036 バイト

f:id:a-kuma3:20141028001051j:image:w300:left画質 40 JPEG
サイズ:13936 バイト

f:id:a-kuma3:20141028001049j:image:w300:left画質 20 JPEG
サイズ:10267 バイト

f:id:a-kuma3:20141028001047j:image:w300:left画質 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 属性だけを入れ替えれば十分です。

id:hossiiii

a-kuma3さん

いつも回答ありがとう御座います。
画像の圧縮はなんとなく考えていたのですが
回答している時に次の問題の画像を読み込んでおくという事は
まったく思いつきませんでした。

ありがとうございます。確認してみます。

2014/10/28 15:10:35
id:noromanba No.2

のろまんば回答回数10ベストアンサー獲得回数02014/10/28 05:42:33

ポイント100pt

おおむねa-kuma3さんがお答えになっていますので、細かい補足です。

画像圧縮は無劣化でもファイルサイズを落とす方法が色々あります。試しに https://compressor.io/ を利用してみました。
f:id:noromanba:20141028052719p:image
pngのまま、70,036 バイト→19,550 バイトになりました。
このあたりでライセンスとの兼ね合いを見てみて下さい。 google:画像 無劣化 圧縮

上に挙げられているように先読み(プリフェッチ)以外だと、ロード自体を遅延させる方法があります。実装の方式によると思いますが、jQueryだとjQuery.lazyloadプラグインがあるので検討なさってみて下さい。

導入例がこちらです。PC/スマホ共に、読むまで画像を出さないようにしています。

ただ、クイズのような画面ではあまり使いどころが無いかもしれません。

id:hossiiii

のろまんばさん

回答ありがとうございます。
無劣化での圧縮方法があるとは知りませんでした。
有料のソフトでも良いものがあれば購入を検討致します。

取り急ぎお礼まで。

2014/10/28 15:13:01
id:cno No.3

cno回答回数123ベストアンサー獲得回数112014/10/29 20:43:20

ポイント200pt

他の方の回答で解決出来ているので、画像圧縮について記載させていただきます。

PNGoo(pngquant)というソフトでPNGの色数を減らすことでサイズを小さく
することができます。GPLのため無償で使えます。
http://www.forest.impress.co.jp/docs/review/20140228_637513.html
http://pngquant.org/

参考ですが、掲載されているイラストを8色にした場合約6KBになりました。
20141029203938

他2件のコメントを見る
id:hossiiii

cnoさん
お返事が遅くなりました。
このツールですが以下の理由で私の欲しい機能にベストマッチでした。

1.色数を変える事で圧縮率を変える事が出来る
2.一度に複数の画像の処理が出来る

非常に満足しております。紹介して頂いてありがとうございます。

2014/11/01 12:12:13
id:cno

hossiiiiさんこんにちは。お役に立てて何よりです。jQueryなど外部のライブラリはCDNを活用するのも効果的です(多くの場合gz圧縮対応のため、ご利用のWebサーバが未対応の場合は特に)。よければご参考ください。

https://developers.google.com/speed/libraries/devguide#jquery

2014/11/02 14:51:30
id:hossiiii

回答頂いたみなさん、誠にありがとうございました。
今回は一番最初に回答して下さり、欲しい情報も的確であったため
a-kuma3さんにBAをつけさせて頂きました。

また圧縮ツールとしてはcnoさんの紹介して頂いたPinGooが私には相性が良かったです

・画像を事前にロードする事
・画像を圧縮する事

でかなり高速に動くようになりました。
今後ともどうぞよろしくお願い致します。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません