Как да избегнете предварително зареждане на изображения, когато използвате jQuery Cycle Plugin

Имам слайдшоу (jQuery Cycle) с големи изображения и бих искал да ИЗБЯГВАМ предварителното зареждане на всички изображения, когато страницата се зарежда.

Вместо това бих искал да заредя само първото изображение, а останалото да се зареди, след като потребителят КЛИКНЕ върху него.

Наистина ще се радвам на всякакви идеи! Новак в Javascript тук... Благодаря много!!!!!


jquery preload cycle
person Guilherme    schedule 29.10.2010    source източник
comment
Можете ли да ни посочите някакви примери за код?   -  person James South    schedule 29.10.2010
comment
Какво ще кажете за използването на опцията преди в jQuery Cycle? Каква е разликата между тези 3 опции? ››› 1. tinyurl.com/29vl5t4 ››› 2. tinyurl.com/24o2stc ››› 3. tinyurl .com/2flybss Как мога да използвам един от тези методи и да го свържа с щракване върху първото изображение?   -  person Guilherme    schedule 29.10.2010

Отговори (2)


arrow_upward
2
arrow_downward

Така че най-доброто решение, което намерих, беше тук: http://tinyurl.com/24o2stc Използване на опцията „преди“ от jQuery Cycle, той зарежда само първите 2 слайда и добавя следващия, докато продължавате да щракате през слайдшоуто.

person Guilherme    schedule 29.10.2010

arrow_upward
0
arrow_downward

Не знам дали това ще ви помогне, но идеята е изображенията да се зареждат в javascript, а не в HTML, защото не можете да предотвратите зареждането на всичко, ако е в HTML.

Вижте отговора ми на този въпрос:

jquery обикновен плъзгач за изображение с ajax

„Мисля, че можете да направите това с jcarousel:

http://sorgalla.com/jcarousel/

Номерът е да предавате изображенията едно по едно в javascript, а не в html, ако не, те винаги се зареждат предварително.

Кодът би бил:

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>";

}

"

person netadictos    schedule 29.10.2010
comment
благодаря за предложението netadictos! Но само за да го опростя (не трябва да добавям и jcarousel), мога ли да постигна това, като използвам тази опция преди в jquery Cycle, която споменах по-горе? Знаете ли как мога да го свържа с щракване върху първото изображение? Благодаря! - person Guilherme; 29.10.2010
comment
@Guilherme - изобщо не, винаги можете да гласувате за, въпреки това проверих предишната опция с firebug в мрежовия раздел и всички изображения са предварително заредени. Бихте ли го погледнали, моля, и докладвайте? - person netadictos; 29.10.2010
comment
Играх си с опцията преди от плъгина jQuery Cycle и тя работи. Потвърдих го с firebug! Изглежда по-чист по този начин, така че не трябва да викам друг плъгин. Благодаря! - person Guilherme; 30.10.2010
comment
@Guilherme - Тествах го отново и е вярно, че не са предварително заредени, единственото задължително нещо е да има 2 слайда в HTML. Моето решение има предимството, че можете да вмъкнете въртящ се символ, в случай че не се е заредил, когато се появи слайдът, с предишното решение понякога слайдовете са празни, защото не са заредени предварително. Това каза, гласувам за вашия отговор. - person netadictos; 30.10.2010