• 締切済み

画像のプリロード

ページの中で画像を多く使用しており、読み込みがカクカクと1つずつ表示されます。 調べたところ、cssのプリロードとjavascriptのプリロードがあるとのこと。 ・cssのプリロードとjavascriptのプリロードの違いはなんでしょうか。  使用するとしたらどちらがよいですか。 ・そもそもプリロードしたらページの読み込みは早くなりますか。 詳しい方いましたらご教授お願いします。

みんなの回答

  • sanzero
  • ベストアンサー率56% (58/102)
回答No.2

プリロードより遅延ロードの方が見え方が素敵ではないでしょうかる lazy loadというものがあります。 http://www.webdesignleaves.com/wp/jquery/1335/ プリロードしても描画速度は変わらないですが、遅延ロードは最初の描画までは早くなります。 写真は適切に縮小してますか?

回答No.1

データ量は変わりませんので、読み込み速度は早くなりません。 ページを表示しながら画像を読み込んで、読み込み終わった画像から表示しているのを 表示を開始する前に画像を読み込んで画像を読み込みおわったら、ページ全体を一気に表示するだけです。 ですので、読み込み開始~表示完了までの速度は変わりません。 表示開始されてからの完了までの速度は早くなります。 と思います。

yu283574
質問者

お礼

ありがとうございます。 実際、どっちのほうがいいんでしょうか?作成者の好みになりますか。

関連するQ&A

  • 画像のプリロードに付いて

    ● 1.html、2.html、3.html、4.html、5.html とページがあるとします。 ● それぞれのページにメインビジュアルとなる少し大きめの画像があるとします。 ● 1.htmlを表示させたときに2~5.htmlの画像も先に読み込んでブラウザにキャッシュさせる。 ● ページを移動しても画像がキャッシュされているので表示が早くなる。 というのをしたいのです。 プリロードに関するのは検索でたくさん出て来たのですが、 自分の思う様な物はありませんでした。 ※探しきれてないだけかもしれません。 もしよろしければご教授願います。 よろしくお願い致します。

  • 画像のプリロード

    jqueryを使い、下のようなサイトを作っています。(URL先はサンプル) http://s1.shard.jp/studioy/test2/ 横に大きな画像を一枚使っており、ページを開くと同時に画像がスライドし、一番最後まで流れたらストップ、右側のリンクで希望の画像までスライドできるようになっています。 動きに支障はないのですが、最初に読み込んだときに画像が完全に読み込まれておらず、徐々に表示されてしまいます。 一応、jsでプリロードさせているのですが、環境によってなのでしょうか。 jsで読ませる他に、何か方法はないでしょうか? どなたか詳しい方、ご教示下さい。

  • 画像のキャッシュとプリロード

    かねがね疑問に思っていたのですが、ロールオーバーの画像とかはonLoadでプリロードされるので、マウスをのせればすぐにOver画像が表示されると思っていたのですが、現実はその時にネットからくるとしか思えない動きをしている。 またキャッシュされたものはその後の表示がキャッシュされているので速いので、共通に表示されるフレームとかは、別からまた呼び出してもそんなにレスポンスは落ちないと僕は考えているのですが。 これって勘違いでしょうか、それともやり方があるのでしょうか。プリロードとロールオーバーはDreamweaverのFunctionです。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 指定したフォルダの画像を一括でプリロードしたい

    ページが表示されたときに、指定した画像をプリロードするようjavascriptで実装しています。 preloadの引数に1つ1つプリロードしたいファイルを書いていかないといけないので ファイル数が多くなると手間です。 例えば img/photo1.jpg img/photo2.jpg img/thumb.jpg image/photo1.jpg image/photo2.jpg image/thumb.jpg という具合にimgとimageのフォルダがあってimgにだけある画像ファイル全てを一括でプリロード したいです。どのようなソースをかけばいいでしょうか? また、指定したフォルダ以下の画像ファイルを一括でプリロードする関数などがあるのでしょうか? function preload(imgs){   for(var i = 0; i < imgs.length; i++){    var imgObj = new Image();    imgObj.src = imgs[i];    } } preload(["./img/photo1.jpg", "./img/photo2.jpg", "./img/photo3.jpg"]);

  • ロールオーバーの「プリロード」の設定で…

    JavaScriptのロールオーバーで画像のプリロードを行いたいのですが、 <body onLoad=”MM_preloadImages(~~~というように、BODYの中に書く以外に、方法はありませんか?いろいろ検索してみましたがわかりませんでした。 「JavaScript」の書き方講座、のようなサイトではなく、すぐに使えるサンプルソースが載っているものが良いです。

  • 画像読み込み時にjavascriptを実行すると処理が中断

    お世話になります。 HTMLで画像が多いページがあります。 そのページにはjavascriptが記述されているのですが 画像の読み込みがすべて終えていない状態で javascriptを実行されると画像の読み込みが途中で中断されてしまいます。 (IEのみ)※バージョンはIE6 画像読み込み時はjavascriptを実行させないようなこととか 何か対処法等ございませんでしょうか? 申し訳ありませんが、ご教授の程、よろしくお願いいたします。

  • divの背景画像を、徐々に表示させるには?

    トップページに、2つのdivボックスを設置し、 それそれの背景画像をcssで、リピートさせるようにします。 さらに、それぞれのdivの背景画像が、 徐々に表示されるようにしたいのですが、 cssや、javascriptで可能でしょうか? (最初は真っ白→だんだん背景画像) 可能でしたら、その方法を御教えいただけますでしょうか! Flash使用は、考えておりません。 よろしくおねがいいたします。

  • 特定の画像を非表示にする方法

    CSSかJavascriptを使って、自動的にページに組み込まれてしまう画像を非表示にしたいです。 ソースに特定の画像を非表示にする内容を書き込むと思うのですが・・(非表示にする画像のURLを指定?) よろしくお願いいたします。

  • SS900のプリロード調整

    バイクは'01 Ducati SS900です。 リアサスのプリロード調整を行おうと思ったのですが 調整ナットを回す車載工具がついておりません。 工具はピンレンチというのでしょうか? 国産バイクでしたら必ず付属していると思うのですが。 この工具は売っているのでしょうか? また専用工具を使用しなくても回すことは出来るのでしょうか? 何かご存知の方がいらっしゃいましたら ご教授願います。

  • ページ読込中に表示が崩れるのを直したい。

    ショッピングカートのASPを使っていて、javascriptをheadで読み込めません。 そのせいなのかわかりませんが、スライドショーのjqueryを使用すると、ページ読み込みの際に、 スライドショーの中の画像が崩れた形で表示されます。 数秒待てば通常の表示に戻るのですが、綺麗に表示させることはできないでしょうか? javascriptでページ成形された後に、画像が読み込まれればいいのですが。 何卒よろしくお願い致します。