0

ポートフォリオ ページ内に大きくて幅の広い画像があります。画像は「プログレッシブ」に保存され、正常にロードされます。

これらの画像をプリロードして、より速くスムーズに表示する方法があるかどうか疑問に思っていました。または、他のすべてのページと画像をキャッシュにプリロードして、少なくとも最初のページ以降のすべてのページがスムーズかつ高速に表示されるようにする方法があるでしょうか? ページの読み込みを高速かつスムーズにするのに役立つものは何でも。

助言がありますか？

各画像はさまざまな画像で構成されており、それらはすべて 1 つのワイド画像 (PSD で作成) 内にあり、訪問者は左右に移動してそれぞれの画像が中央に表示されるように呼び出すことができます。残念ながら、ここでは画質を犠牲にしたり、小さくしたりすることはできません。

ここに画像広告のプリロードに関する投稿があることは知っていますが、HTML コードに埋め込まれた画像で機能するものは見つかりません。

私は CSS と Javascript の初心者なので、単純なほど理解できる可能性が高くなります。画像を 1 つのインスタンスに分割し (1 つの画像全体ではなく、画像の行にする)、それらをフローティング div に配置し、それぞれの Javascript コードを変更するのは、私には難しすぎるのではないでしょうか? 他にどうすればそれができますか？

感謝！

これが私が持っているものです（すべてのHTML、Javascript、およびCSSをここに投稿するのはやり過ぎだと思います。いくつか投稿します）。大きな画像は HTML ページ内に配置され、Javascript を介して呼び出されます。

ここを参照

<div class="ShiftGroup">
        <div class="ShiftGroupC">
        <div class="ShiftGroupI"><div id="ShiftGalleryFive"><img src="images/gallery_anzic1.png" width="3348" height="372" alt="imagegallery1" /></div></div>
        <div class="ShiftGroupP" style="margin-left: -990px;"><div id="ShiftLeft" class="ShiftGroupD"><span class="pointer"><img src="images/arrowleft.png" width="78" height="50" alt="arrowsleft" /></span></div></div>
        <div class="ShiftGroupP" style="margin-left: 341px;"><div id="ShiftRight" class="ShiftGroupD"><span class="pointer"><img src="images/arrowright.png" width="78" height="50" alt="arrowright" /></span></div></div>

と

gallery = document.getElementById('ShiftGalleryFour').style;
4

1 に答える 1

0

これは、プロジェクトの 1 つで画像をプリロードする方法です。

preloadImages = function(imageIndex) {

  // Finds div element containing index (1..n) and url of image 
  // (both stored as data attributes)
  var image = $(".data .image[data-index=" + imageIndex + "]");

  // Creates an image (just virtually) that is not embedded to HTML.
  // Its source is the url of the image that is to be preloaded
  var preloadedImage = $(new Image()).attr("src", image.attr("data-full-url"));

  // Bind an event to the "virtual" image to start preloading next image when 
  // this one is done
  preloadedImage.load(function() {

    // Start preloading the next one
    preloadImages(imageIndex + 1);
  });
}

// Start preloading the first image
preloadImages(1)

あなたの場合、これは問題の一部、つまりプリロードのみを解決します。

html のすべての画像をimgタグとして含めているようです。imgパフォーマンスを向上させたい場合は、ギャラリーの HTML にタグを配置しないでください。画像の将来のコンテナーdivになるタグのみ。これらの div にはインデックスがあり、画像の URL を持つデータ属性が含まれている場合があります (私の例で見られるように)。ページが読み込まれたら、プリロード手順を開始します。「仮想イメージ」がロードされるとき。コンテナー内に新しいイメージ タグを作成し、次のイメージのプリロードを開始します。

これにより、ページのダウンロード時間が確実に短縮されます。

私の例では、スクリプトを簡素化するjQueryを使用しています。純粋な JavaScript はより複雑になります。

アップデート：

これは、プリロードの例がどのように機能するかです。

HTML

4 つの画像があり、それらすべてにコンテナー (個々の画像を配置する div) があるとします。

<div class="images">
  <div class="image" data-index="1" data-src="image_1_source_path"></div>
  <div class="image" data-index="2" data-src="image_2_source_path"></div>
  <div class="image" data-index="3" data-src="image_3_source_path"></div>
  <div class="image" data-index="4" data-src="image_4_source_path"></div>
</div>

JavaScript

ドキュメントがロードされた後、プリロード手順が開始される場合があります。最初のイメージをプリロードすることから始めます。この画像が読み込まれた後、そのコンテナに追加して、次の画像のプリロードをトリガーします。returnすべてのイメージがロードされ、コンテナーが見つからない場合にも呼び出されます。

preloadImages = function(imageIndex) {
  var imageContainer = $(".images .image[data-index=" + imageIndex + "]");
  return if imageContainer.length === 0
  var preloadedImage = $(new Image()).attr("src", image.attr("data-full-url"));
  preloadedImage.load(function() {
    imageContainer.append(preloadedImage);
    preloadImages(imageIndex + 1);
  });
}

$(document).ready(function(){
  preloadImages(1);
});

うまくいけば、あなたはアイデアを得る。

于 2012-09-21T18:12:12.240 に答える