1

大きな画像を含むスライドショー (jQuery サイクル) があり、ページの読み込み時にすべての画像を事前に読み込むことを避けたいと考えています。

代わりに、最初の画像のみをロードし、ユーザーがクリックした後に残りをロードしたいと思います。

アイデアをいただければ幸いです。ここにJavascriptの初心者がいます...どうもありがとうございました!!!!!

4

2 に答える 2

2

だから私が見つけた最良の解決策はここでした: http://tinyurl.com/24o2stc jQuery Cycle の「before」オプションを使用すると、最初の 2 つのスライドのみが読み込まれ、スライドショーをクリックし続けると次のスライドが追加されます。

于 2010-10-29T23:46:35.303 に答える
0

これが役立つかどうかはわかりませんが、概念は、HTML の場合はすべての読み込みを防ぐことができないため、HTML ではなく JavaScript で画像を読み込むことです。

この質問に対する私の答えを見てください。

ajaxを使用したjqueryのシンプルな画像スライダー

「jcarouselでそれができると思います：

http://sorgalla.com/jcarousel/

トリックは、htmlではなくjavascriptで画像を1つずつ渡すことです。そうでない場合は、常に事前にロードされます。

コードは次のようになります。

var mycarousel_itemList = [
{url:"/im/a.jpg", title: ""},{url:"/im/b.jpg", title: ""}];

listaimg=document.createElement('ul');
jQuery(listaimg).attr('id','mycarousel');
jQuery(listaimg).addClass('jcarousel-skin-tango');
jQuery('#containercarousel').append(listaimg);
jQuery('#mycarousel').jcarousel({   auto: 9,wrap: 'last', visible: 1,scroll:1, size: mycarousel_itemList.length,
    itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}

   });


function mycarousel_itemLoadCallback(carousel,state){for(var i=carousel.first;i<=carousel.last;i++){if(carousel.has(i)){continue}if(i>mycarousel_itemList.length){break};

carousel.add(i,mycarousel_getItemHTML(mycarousel_itemList[i-1]));


  }
};
function mycarousel_getItemHTML(item)
{


  var img = new Image();
                 $J(img).load(function () {

// whatever you want to do while loading.
    }).attr('src', item.url);
 return "<li><img src=\"" + item.url + "\" width=\"770\" alt=\"\" /></li>";

}

"

于 2010-10-29T09:04:32.647 に答える