jqueryについて質問があります。
結論から述べますとブラウザアプリの高速化したいと考えております。
【現状の課題】
現在jqueryを使って4択クイズのサイトを構築しています。
※イメージ画像を添付致します
仕組みとして、正解の回答がクリックされたら
次の問題の画像を表示するという簡単な動作を以下のようなスクリプトで行っております。
$("div#bodyarea001").html("");
$("div#bodyarea001").append('<img src="http://xxx/wp-content/uploads/' + flag + '.jpg">');
この際に、3G回線を使うようなスマートフォンで実行すると
動作が非常に遅くなってしまいました。
画像一つのサイズが約80kbyteあり、その画像が100個程使われます。
【質問内容】
①これらの画像はappendが実行される際にロードされるのでしょうか？
②最初に全画像データをロードして、クイズ時の処理を軽くすることは可能でしょうか？
③上記②以外で処理を軽くする方法はあるのでしょうか？
目的としては、最初にも述べましたがブラウザアプリの高速化になります。
具体的なコードのサンプルや参考サイトなどがあるとより助かります。
不足している情報などがあればご指摘下さい。
お手数お掛け致しますがよろしくお願い致します
ベストアンサー
-
a-kuma3
満足200pt
①これらの画像は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 属性だけを入れ替えれば十分です。
-
その他の回答
-
のろまんば
満足100pt
おおむねa-kuma3さんがお答えになっていますので、細かい補足です。
画像圧縮は無劣化でもファイルサイズを落とす方法が色々あります。試しに https://compressor.io/ を利用してみました。
pngのまま、70,036 バイト→19,550 バイトになりました。
このあたりでライセンスとの兼ね合いを見てみて下さい。 google:画像 無劣化 圧縮
上に挙げられているように先読み(プリフェッチ)以外だと、ロード自体を遅延させる方法があります。実装の方式によると思いますが、jQueryだとjQuery.lazyloadプラグインがあるので検討なさってみて下さい。導入例がこちらです。PC/スマホ共に、読むまで画像を出さないようにしています。
ただ、クイズのような画面ではあまり使いどころが無いかもしれません。
-
- その他の回答を読む
passivedokechiこの質問へのコメント
質問の情報
- 登録日時
- 2014-10-27 23:28:33
- 終了日時
- 2014-11-01 12:13:24
- 回答条件
- 1人1回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
よく女に間違われます。高1男子です。 先日トイレに行きたくなったのでトイレに行こうと思い、男子トイレに…
匿名質問者
2
-
木の太い幹、木の太い根、を掘り出しました。このまま捨てるのは大変です。重いです。切るのも硬いです。干…匿名質問者
-
今行きがかり上で中小企業を相手に民事訴訟の原告と被告で2件の裁判を抱えています。しかし何も深刻さはな…
asnaro_71
1
-
海外の習慣、民族的なことに詳しい方に質問です。 「玄界灘に生きた人々」という本で、「ダイコン官との旅…匿名質問者
-
【ナルコ】 私は医療に関して（当事者ではあるものの）素人です。 友人Aは「ナルコレプシー」的に、話して…
SE**.M