Jcarousle - загружать изображения перед анимацией, чтобы не было белых пустых квадратов

I'm working on a gallery with jCarousel. I've created a script that loads the next images to the gallery each time I click on the next button from an array. Each time I click next, the next five images are loaded. It all works really great, but my problem is that I see the empty

  • before the images are loaded, so half of the animation's duration I only see empty squares moving. I tried two solutions : 1) add a delay to the animation - after the
  • items are added to the carousel, add a wait of a second or two - which didn't work for me, because it seems that part of the animation is to turn the newely added images to visible, so if I add a delay animation function, it does the exact same things (show empty squares for a moment)...

    Интересно то, что если я добавляю предупреждение, когда я его закрываю, изображения уже загружены, а анимация идеальна — как будто код продолжает работать, а изображения загружаются — за исключением того, что анимация начинается только после закрытия предупреждения.

    2) Пробовал загружать картинки в какой-то невидимый кеширующий div, но естественно надо сделать так, чтобы display:none, и опять тоже самое, картинки не грузятся, пока не начнется анимация (и картинки повернуты на display: block . ..

    это строка, событие и имя функции, которые я использую для загрузки изображений:

    itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}

    Я знаю, что может быть недостаточно входных данных и кода, но скрипт стал очень длинным, поэтому, если конкретная часть может быть полезна (или все это?), просто дайте мне знать... Я не хочу загромождать сообщение :)

    Спасибо, что прочитал это, Ян


    • javascript jquery jcarousel
    person Yanipan    schedule 09.09.2011    source источник
    comment
    Хорошо, попытался добавить $.load(img) в цикл, который добавляет изображения в карусель, не сработало. Я действительно думал, что это может :)   -  person Yanipan    schedule 09.09.2011

    Ответы (2)


    arrow_upward
    0
    arrow_downward

    Я достиг этого, выполнив следующие действия:

    • когда я собираю новые узлы карусели LI, я добавляю элемент изображения, но не устанавливаю атрибут src
    • после того, как я закончу добавлять узлы в свою карусель, я привязываю метод к событию load изображений. Событие загрузки увеличивает количество загруженных изображений. Как только количество совпадет с размером карусели, я узнаю, что все изображения загружены, и я могу запустить анимацию.

    e.g. 

    var imageLoadCount = 0;
var jcarousel = $("#myCarousel").data("jcarousel");

var imageLoaded = function() {

  imageLoadCount++;

  if(imageLoadCount === jcarousel.options.size) {
    // all the images have loaded.. begin the scroll
    jcarousel.options.auto = 5; // scroll every 5 seconds
    jcarousel.startAuto();
  }
};

var addItems = function(data) {

  jcarousel.size(data.length);

  $.each(data, function(index) {
    jcarousel.add(index + 1, getItemAsHtml(this));  // helper function to create node
  });

  $("img", carouselID).bind("load", imageLoaded);

  $("img", carouselID).each(function(index) {
    this.src = data[index].ImageUrl; // this triggers the image loaded event
  });
};

    Примечание: это неполный рабочий код; он был отредактирован для ясности. Кроме того, имейте в виду, что данные, которые я передаю в addItems(), представляют собой массив объектов json, каждый из которых содержит свойство ImageUrl.

    person eponymous23    schedule 16.10.2011

    arrow_upward
    0
    arrow_downward

    Попробуйте это http://elouai.com/javascript-preload-images.php

    Ваше здоровье.

    person vtortola    schedule 09.09.2011