16

優れたNivosliderプラグインを使用して、ホームページに一連の写真（現在は5枚）を表示しています。すべて正常に機能していますが、各写真によってページの重みが約150K増加します。実際には約10枚の「スライド」を紹介したいと思いますが、これらの画像はすべてページの開始時にプリロードされるため、特に多くのユーザーが「表示」を待たない可能性があるため、ページの太さはすぐに（大きすぎます）大きくなります。終わる。

画像をプリロードしないで、またはx画像だけ先に保存することは可能かどうか疑問に思いました。ドキュメントにそれについて何も見つからないので、ネイティブにサポートされていないと思います。何か案は？

4

6 に答える 6

20

私は同様の解決策を探していました。スライドショープラグインを使用してホームページに12個の高品質画像をロードする画像ギャラリーがWebサイトにあります。そして、これらすべての画像が一度に読み込まれ、ページの重みに2〜3メガが追加されます。サイコロはありません。

Nivoは、画像処理をブラウザに任せています。タグを読み取り、<img src="...">画像を滑らかなトランジション効果のあるスライドショーにまとめます。画像の読み込みまたは事前読み込みを制御するコードはありません。

幸い、NivoはGithubにあります。そこで、画像の遅延読み込みをサポートするためにフォークしました。

https://github.com/leepowers/Nivo-Slider

使い方は同じです。HTMLに1つの小さな変更を加える

<div id="slider">
 <img src="my-large-image.jpg" alt="">
 <img src="my-large-image2.jpg" alt="">
 <img src="another-biggun.jpg" alt="">
</div>

画像のsrc属性を次のdata-src属性に変更します。

<div id="slider">
 <img data-src="my-large-image.jpg" alt="">
 <img data-src="my-large-image2.jpg" alt="">
 <img data-src="another-biggun.jpg" alt="">
</div>

は解析されないためdata-src、Nivoが画像を使用する準備ができるまで画像は読み込まれません。data-srcが優先されます。つまり、JavaScript以外のユーザーにはsrc低解像度のバージョンを指定するか、HTMLがバリデーターを渡すようにスペーサー画像を入力することができます。 srcsrc

見てみな！私はそれをいくつかのプロジェクトに実装しています。デモはこちらから入手できます：http：//powers1.net/files/nivo/demo/demo-lazy.html

于 2012-04-05T05:09:07.977 に答える
1

Nivoスライダーには画像プリローダーがありません。（nivoのデモのように）jQueryロードイベントでスライダーを使用している場合、nivoスライダーはすべての画像がページに読み込まれるまで待機します。

$(window).load(function() {
        $('#slider').nivoSlider();
});

すべての画像が読み込まれるまで待ちたくない場合は、以下のようにドキュメント準備完了イベントをお勧めします。画像はプリロードされません。

$(document).ready(function() {
   $('#slider').nivoSlider(); 
});

制御されたプリロードが必要な場合。次のようなjQueryの画像プリロードプラグインの1つを使用できます。 http://www.farinspace.com/jquery-image-preload-plugin/

$(document).ready(function() {
   $('#slider').nivoSlider(); 
   //Before starting the slider preload your images then start your slider.
   $.imgpreload(['/images/a.gif','/images/b.gif'],
   {
    all: function()
    {
       //Start slider here
    }
   });
});
于 2012-04-04T21:49:22.227 に答える
0

画像を配列に入れてプリロードする関数を作成できます

jQuery.preloadImages = function() {   
 for(var i = 0; i<arguments.length; i++)   
{
      jQuery("<img>").attr("src", arguments[i]);   
}

}

関数を使用するには、画像のURLの配列を指定します。

$.preloadImages("test.png", "/imageUrl");
于 2012-04-04T11:52:07.973 に答える
0

デフォルトでページの読み込み時に、画像のサブセットを使用してスライダーを初期化するとどうなりますか。その後、jQueryを使用して画像を動的に作成し、スライダーを再初期化しますか？ajax呼び出しを使用した例については、以下を参照してください。

Nivosliderの更新または再起動、さらには破棄

于 2012-04-04T21:14:01.377 に答える
0

Burakからの回答は私には問題ありませんが、Safariでは機能しません。私は変更しようとしました、そしてこれは私の解決策です：

$(window).ready(function() {
   $('#slider').nivoSlider();

Safari、IE、Firefoxで正しく動作します。もちろん、制御されたプリロードを追加することもできます。

于 2012-06-14T10:28:46.953 に答える
-1

#sliderページが読み込まれるまで非表示にしてから、divを読み込むことができます。

  1. CSSファイルのに追加display:none;します。#slider

  2. 既存のコードと一緒にを追加$('#slider').css('display','block');すると、次のようになります。$(window).load(function() {..});

    $(window).load(function() {
    $('#slider').css('display','block');
});
于 2011-08-30T05:05:53.600 に答える