人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

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

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

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

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

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

1414420113
●拡大する

●質問者: hossiiii
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● a-kuma3
●200ポイント ベストアンサー

?これらの画像は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 属性だけを入れ替えれば十分です。


hossiiiiさんのコメント
a-kuma3さん いつも回答ありがとう御座います。 画像の圧縮はなんとなく考えていたのですが 回答している時に次の問題の画像を読み込んでおくという事は まったく思いつきませんでした。 ありがとうございます。確認してみます。

2 ● のろまんば
●100ポイント

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

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

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

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

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


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

3 ● cno
●200ポイント

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

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

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


のろまんばさんのコメント
256色/8bitの不可逆変換なんですね。確かにクリップアート系は、gif相当で十分かも。Windows・Mac・Linuxに対応してるのも良いですね。

cnoさんのコメント
のろまんばさんこんにちは。はい、不可逆圧縮です。減色時のアルゴリズムが賢いみたいで、アイコンのようなものは4ビット(16色)くらいでも十分な画像が得られます。風景写真のようなjpgが適しているものでも8ビット(256色)で以外とイケるのでお気に入りです。 あと今回の質問者さんの目的に合うかどうか微妙ですが、htmlやcss,javascriptの minifyが意外と侮れないです HTMLならこのあたり? https://code.google.com/p/htmlcompressor/

hossiiiiさんのコメント
cnoさん お返事が遅くなりました。 このツールですが以下の理由で私の欲しい機能にベストマッチでした。 1.色数を変える事で圧縮率を変える事が出来る 2.一度に複数の画像の処理が出来る 非常に満足しております。紹介して頂いてありがとうございます。

cnoさんのコメント
hossiiiiさんこんにちは。お役に立てて何よりです。jQueryなど外部のライブラリはCDNを活用するのも効果的です(多くの場合gz圧縮対応のため、ご利用のWebサーバが未対応の場合は特に)。よければご参考ください。 https://developers.google.com/speed/libraries/devguide#jquery

質問者から

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

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

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

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


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ