Как избежать предварительной загрузки изображений при использовании плагина jQuery Cycle

У меня есть слайд-шоу (цикл jQuery) с большими изображениями, и я хотел бы ИЗБЕГАТЬ предварительной загрузки всех изображений при загрузке страницы.

Вместо этого я хотел бы загрузить только первое изображение, а остальные загрузить после того, как пользователь нажмет на него.

Буду очень признателен за любые идеи! Новичок в 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), могу ли я добиться этого, используя эту опцию before в 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