• 締切済み

画像を読み込む順番を指定したいです

私はイラストレーターで、自分のサイトに作品を載せるため、画像数がたくさんあります。たとえば画像が50枚あるとしたら、1枚目から画像を読み込むようにするにはどうすればよいのでしょうか? 今の問題は、作品のページを読み込むのにすごく時間がかかってしまいます。15秒くらいかかって、やっとすべてのアイコン画像と、作品の画像が読み込めます。これは、画像を50枚一気に読み込んでいるから遅いのですよね?そうではなく1枚目から順々に読み込んでいって、最後の50枚目は、他の画像を見ている間に読み込めれば時間がかからないと思うのですが、そのような設定はどうすればいいでしょうか。 それとも、その他に、読み込みを遅くしている原因は何か考えられますか? DreamweaverとCSSに基本的な知識はありますが、すごく詳しいわけでもありません。宜しくお願いします。

みんなの回答

  • nori_007
  • ベストアンサー率35% (369/1048)
回答No.4

以下の回答します。 >>2、画像データが大きい場合、解像度が不要に高くないか。 >どのくらいの解像度がいいのでしょうか? モニターの解像度は、72dpi もしくは 96dpi が一般的です。これ以上の解像度にしても、見た目の違いは有りません。ただし印刷した場合印字品質は余り良く有りません。印刷を考えた場合、解像度はプリンタの能力に依存します。 ちなみに、No3 さんの回答は少し勘違いされていると思います。 >>3、全ての画像を1ページで表示させてないか。 >これは、例えばサムネールをクリックしたときに、別のウインドで画像を表示するほうがいいという事でしょうか? 考え方次第です。画像が50点あるなら、1ページに10点掲載して5ページ作るというこも考えられます。 その際に、サムネール画像はサイズを小さくした、サムネール専用の画像を用意することが望ましい。html でオリジナル画像のサイズを小さくして表示させる事は余り望ましくない。 ちなみに、No3 さんの回答は半分正解、半分は自分の回答を参考にしてみてください。。 >>4、サムネールの画像と、詳細画像は分けているか。 >これはどういう意味でしょうか? オリジナルの画像サイズが判らないのですが、オリジナルの画像とは別に、サムネール用の小さい画像を用意すると言う事です。 オリジナルとは別に、画像解像度72dpiで、サイズは300px x 200px 等のサムネール専用画像を作るという事です。 サムネール画像をクリックしたら、オリジナル画像を開くように、オリジナル画像にリンクさせます。 最後に、要は今まで以上に手間がかかるとご理解ください。

全文を見る
すると、全ての回答が全文表示されます。
  • HIRSYU
  • ベストアンサー率51% (45/87)
回答No.3

>>2、画像データが大きい場合、解像度が不要に高くないか。 >どのくらいの解像度がいいのでしょうか? 表示サイズと同じ。 imgタグを使用しているなら、imgタグに指定したheightとwidthの値と同じ。 >>3、全ての画像を1ページで表示させてないか。 >これは、例えばサムネールをクリックしたときに、別のウインドで画>像を表示するほうがいいという事でしょうか? Yes >>4、サムネールの画像と、詳細画像は分けているか。 >これはどういう意味でしょうか? サムネイルは256x192サイズの画像を使い、別窓などで開いた画像は1024x768サイズの画像を使う。 ブラウザが表示する画像は、目に見えてる表示サイズではなく、実際にそのサイトのサーバーにある画像サイズ分をダウンロードして表示しています。 (見た目が小さくても、画像のファイルサイズが大きいとダウンロードに時間がかかり、表示も時間がかかる) ですので、サムネイル一覧では、ファイルサイズの小さくなる画像を利用するのが一般的です。

全文を見る
すると、全ての回答が全文表示されます。
回答No.2

レイアウトにTable使ってませんか? tableは全てデータを読み込んでから表示するので、 上から順番に表示という動作はしません。 そのためデータが重ければ重いほど表示までのレスポンスが遅くなります。 場合によってはクラッシュすることもあります。 もしテーブルレイアウトであれば細かくテーブルを分けたり、 テーブルレイアウト自体やめてDivやリストでの記述にするだけでも ずいぶん変わってくると思います。

annasan
質問者

補足

>もしテーブルレイアウトであれば細かくテーブルを分けたり、 例えば、1~25枚の画像を1のテーブル、その下に26~50枚の画像のテーブルを作ると、先に1のテーブルが読み込まれるという事でしょうか?

全文を見る
すると、全ての回答が全文表示されます。
  • nori_007
  • ベストアンサー率35% (369/1048)
回答No.1

画像データは順番に読み込まれ、読み込まれた順に表示されています。 でも、希望通りにならないと言う事で有れば、下記の項目をご確認ください。 1、画像データが大きくないか? 2、画像データが大きい場合、解像度が不要に高くないか。 3、全ての画像を1ページで表示させてないか。 4、サムネールの画像と、詳細画像は分けているか。 等々をご検討ください。

annasan
質問者

補足

>2、画像データが大きい場合、解像度が不要に高くないか。 どのくらいの解像度がいいのでしょうか? >3、全ての画像を1ページで表示させてないか。 これは、例えばサムネールをクリックしたときに、別のウインドで画像を表示するほうがいいという事でしょうか? >4、サムネールの画像と、詳細画像は分けているか。 これはどういう意味でしょうか?

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • CSS内で指定している画像の呼び出し範囲

    テーブルレイアウトからCSSへ移行したいと思っています。 CSSについての知識は、ほとんどなく 慣れるために、とりあえずテンプレートをいじって テストサイトを作成した程度です。 それで教えて頂きたいのですが 1つの外部CSSファイルで、全てのページに適用した場合 閲覧ページで使用していない、(CSS内では指定している)画像ファイルも読み込まれてしまうのですか? HPビルダーで作成していて、ページの容量を調べる事が出来るのですが CSSで指定した画像を全て読み込んだ状態で、トータルサイズが出ます。 一部のページに大きな画像を使った為、ページの容量が200kbを超えてしまったので心配です。 基本が全く分からず、お恥ずかしいのですが よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • 背景に画像を使ったページを作りたい。

    タイトルの通り、DreamWeaverを使って背景に画像を使ったページを作りたく方法を考えています。ちなみにレイヤー、CSSは使いたくありません。 自分の少ない知識で考えると、ページプロパティで背景画像を選択して、その上にテーブルを使ってテキスト等を配置する…それしか思いつかないのですが、他に方法はあるのでしょうか? あと、ページプロパティで背景画像を選択すると、ずっとリピートしてしまうと思うのですがリピートさせない方法はあるのでしょうか? また、大きく重い画像をページプロパティで背景に設定した場合、やはりページの立ち上がりの時間は重くなるのでしょうか? 経験が浅いため、HP制作中にいくつも疑問にぶち当たってしまいます。 どなたか、初心者(私が)と言うことを踏まえて、教えていただけないでしょうか。お願いいたします。

    • ベストアンサー
    • CSS
  • 使用されていないclass,idを調べる方法は?

    Webページの制作をwinXPのDreamweaver8にて行っております。 外部読み込みのCSSのファイルにおそらく使われていないだろうclassなどが沢山ありそうなのですが、これを楽に探せる機能などはありますでしょうか。 dreamweaverの場合単独ファイルで画像の場合はほぼ使われていないだろう事がわかるのですが、CSSも同様に調べられたら便利だと思っています。 また、皆さんは不要なclassなどの整理をどのようにやっているのでしょうか。 よろしくお願いします。

  • CSSで画像を上下中央に配置する方法を教えてください。

    はじめまして。 現在、CSSを使ってホームページを作っているんですが、CSSの枠内に画像とテキストを一列に連続して挿入する場合、テキスト部分がどうしても画像の下の部分合わせて配置されます。 これをなんとかして画像の真ん中にテキストを配置させたいのですが、可能でしょうか? また、まだまだ初心者でCSSの仕組みをよく理解していないのですが、基本的にはCSSというのはdivでboxを作ってそれを配置していくもの理解しています。 ただ、今の私の知識ではdivの中にかなり多い数のdivが挿入されていて、あまりきれいな状態とは言えないような感じなのですが・・・ なにか勘違いしているんでしょうか?

  • flvをhtmlに組み込む方法

    初めて質問させて頂きます 現在DreamWeaver CS3にてhtmlのサイトを作成しております。 そこでデザイン作品の展示を行うのですが、動画の載せ方がいまいちわかりません。 Aftereffectでflvに変換したはいいが、windows内のソフトでは開けない状態です・・・どうすればよいでしょうか?? こちらの知識としては、cssの基本を習得している程度です。 説明が足りないかもしれませんが、どうぞよろしくお願い致します。

  • PhotoshopやIllustratorで作ったデータをDreamweaver上でコーディングしたい

    HPを作って10年ほどになります。 元々は趣味で作っていたのですが、結婚をし、現在は知り合いのHPを時々更新したりしています。 10年ほど前は、HTMLを手書きでしていたのですが、数年前からDreamweaverを使いだすようになりました。 が、未だDreamweaverを使いこなせていません。 自分の癖というか、未だにHTMLを手書きでしており、作るページは皆、同じようなデザインで洗練されたデザインのHPが作れません。 私の作るページはいわゆる10年ほど前によく見られたページです(左にフレームで何だか古臭い)。 それを広告代理店に勤めるデザイナーに相談すると「今は手書きのHTMLで一から書いている人はあまりいない。Photoshopや Illustratorなどの画像ソフトで全体のデザインを作ってDreamweaverに組み込んだで作った方がいいよ」と言われました。 (いわゆるコーディング作業というのでしょうか) 10年近くHTMLを手書きで書いていたのですが、今後は、PhotoshopやIllustrator制作→Dreamweaverで制作(更新)で統一したいと思っています。いわゆる企業のHP、FLASH等が使われたページを作りたいと思っています。 一応、自分なりに試してみたのですが「PhotoshopやIllustratorなどの画像ソフトで全体のデザインをする」ところまではできるのですが、それを、Dreamweaver上に組み込み作り込んでいくという作業がうまくいきません。FLASHは使ったことがありません。今後はFLASHも使いたいと思っています。CSSについては、文字の大きさ、行間等に使うくらいで他にこれといって使ったことはありません。 HPの基本的な作り方やHTML、Dreamweaverの基本的な使い方は分かってはいますが、PhotoshopのデータをDreamweaverに組み込む作業、CSSを使っていい感じのページにするもうまくいきません。 私のような者の悩みが解決できる、ホームページ、本、教材、学校などがありましたら教えていただけますでしょうか。 多少お金が掛かっても構いません。 その他、解決方法等があればどうぞご教示の程よろしくお願い致します。

  • 画像にテキスト??

    こんにちは。 私は、小さい会社でWebの製作を担当しています。 DreamWeaverで製作していますが、独学の上、 HTMLの知識も乏しいため、うまく質問内容が伝わるのか少し心配ですが、よろしくお願いします<(_ _)> 検索サイトで、上位表示してもらうため、いろいろと研究しているのですが、楽天でかなり売れているサイトで、下記のようなソースをみつけました。 <IMG height=66 src="キーワード.files/top.gif" width=230 border=0> 「キーワード」の部分にそのショップの内容やキーワードが入っていて、それがあらゆる画像や、背景画像、などでも同じようになっています。 他の上位表示されているサイトでも、同じようなソースをみました。 新しいSEO対策のひとつかと思い、自分のサイトの画像の部分の記述も同じようにしてみましたが、画像は表示されませんでした。 CSSか何かなのでしょうか? ご存知の方がいらっしゃいましたら、教えていただければ助かりますm(__)m 私の書いた文章を読んでいただければ、お分かりかもしれませんが、私は本当にHTMLなどの知識がなく、 できればDreamweaverのコードビューではなく、デザインビュー上で作業ができるようなものであれば、それを教えていただけると幸いです。 最近、製作に行き詰まりを感じていて、やはりソースの勉強をしなくては・・・と思っているところなのですが。 どうぞ、よろしくお願いします。

    • ベストアンサー
    • CSS
  • html、CSS、画像を一気にDLする方法

    html、CSS、画像、js等を一気に取得できる方法はありますでしょうか。 windowsですが、ウェブサイトの情報を一気に取得する方法はありますでしょうか。現在は、Ctl + S の「名前をつけて保存」にて、ウェブ情報を取得しておりますが、CSSの一部やCSS内の背景画像は取得できません。 Linuxでは確かできると思うのですが。 特に、CSSの背景画像がすべてDLできれば問題ありません。 Firefox Firebugや、googleのdeveloper tool等でも可能ですが、一つずつ取得していかないといけないので、他の方法があると幸いです。

  • この画像を見かけたことがあれば教えてください!

    この画像を見かけたことがあれば教えてください! yahoo!知恵袋にも投稿しましたが、 作品のタイトル、誰が描いたものか、何と検索すればこの画像が出てくるかなど、多少不安でも構いませんので、教えてください!情報が欲しいんです! 以前ネットで画像を探していたら気に入ったので、あるサイトのアイコンにしたのですが、その際に画像は保存していませんでした。他のサイトのアイコンで使おうとおもったのですが、小さくなっていて使えませんでした。本来の大きさは、1280×960だったかと思います。(あまりアテにしないでください;)この画像、本当に気に入っていたので、思わず質問してしまいました。 どうかよろしくお願いします!!

  • 動画から画像を抽出

    ubuntu機でaviファイル(1つのファイルは7秒程度でそのファイルが450個程ある)から1秒ごとに画像を抽出しなければいけません。 aviファイルの数が膨大なのでGUIを使ったやりかたではなくて、できればシェルスクリプトを組んで一気にやりたいのですが、動画ファイルと画像抽出時刻をしていすれば画像が出力される様なシェルコマンドはありませんでしょうか?

このQ&Aのポイント
  • Lenovo IdeaPad 5は内臓マイクしかなく、外部マイクを接続できません。
  • イヤホン端子を使って外部マイクを接続する方法を試しましたが、認識されませんでした。
  • USBポートにUSB to 3.5mmオーディオ変換アダプタを使用してもマイクが認識されませんでした。
回答を見る