javascript - ロードされたnivosliderの画像を非同期にする方法は？

Question

私が取り組んでいるWebサイトでは、nivosliderスライドショープラグインを使用する必要がありました。問題は、高解像度の画像が10枚以上あることです。したがって、ページをロードするには時間がかかりすぎます。ページを完全にレンダリングした後にこの画像をロードできるようにするオプションはありますか？または、最初にすべての画像をロードするのではなく、画像を1つずつロードしますか？

Answer 1

nivoスライダーに画像をロードさせることはできないと思いますが、javascriptを使用して画像をロードし、その後スライダーを実行することはできます。

これを行うには、次のことを行う必要があります。1.最初の画像のみを使用してスライダー画像のdivを作成します2.残りの画像へのURLを使用してjavascript配列を作成します3.ページが作成されたら残りの画像のコードを作成するjs関数を実行します最初の画像のみが読み込まれます。4。残りの画像の準備ができたら、nivoスライダーを実行します。

次のようになります。

htmlコード

 <div id="sliderWrapper">
   <img src="/myfirstsliderimage.jpg" />
 </div>

javascriptコード（jqueryを使用すると仮定）

var sliderImages = ['/path/to/secondimage.jpg', '/path/to/thirdimage.jpg',
                     '/path/to/forthimage.jpg'];
var imagesLoaded = 1;  //set to one as the first image is loaded with the page

$(document).ready(function(){
  for(i in sliderImages) {
    //create new img element
    var img = $('<img></img>').attr('src', sliderImages[i]).attr('id','sliderImg_'+i);  

    //append to slider wrapper
    $('#sliderWrapper').append(img);  

    //after image is loaded increase the counter, 
    //it will tell us when to start slider
    $('#sliderImg_'+i).load(function(){imagesLoaded += 1;});  
  }

  //after inserting images run nivo slider
  runNivoSlider();
});

function runNivoSlider() {
  if (imagesLoaded == $('#sliderWrapper img').length) {
    //all images are loaded, we can run nivo slider
    $('#sliderWrapper').nivoSlider();
  }
  else {
    //something is still missing try in 300 ms
    setTimeout(function(){runNivoSlider();}, 300);
  }
}

Answer 2

http://webgalli.com/blog/beautiful-jquery-home-page-slideshow-with-translations/をご覧ください

Answer 3

別の回避策は、読み込み中のgif（背景）の代わりに最初のスライダーの画像を表示することです。