Погрузчик .gif преждевременно скрывается

Question

Что я пытаюсь сделать?

Я пытаюсь показать изображение загрузчика, пока изображения вытаскиваются с серверов Flickr в карусель водяного колеса. После того, как набор изображений будет загружен в аккордеон и водяное колесо, изображение загрузчика будет скрыто.

В чем проблема?

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

Я видел проблему, возникающую как в Firefox, так и в Chrome. Как ни странно, были некоторые очень редкие случаи, когда изображение загрузчика фактически оставалось до тех пор, пока изображения не были полностью загружены.

Что я наделал?

Я экспериментировал с расположением $("#loader").hide(); внутри моих двух функций JavaScript.

1. Внутри функции обратного вызова, но после вызова плагина водяного колеса с настройками конфигурации.
2. Внешняя функция обратного вызова, но внутри displayContent().
3. Нигде. Наверное, я надеялся, что он автоматически скроется после загрузки изображений ...: P

Вы можете просмотреть фотогалерею и разметку/скрипты here. Ниже приведен главный сценарий и разметка.

HTML

<!-- lines 348-364 --> 
<!-- Tabs --> 
<ul id="tabs"> 
    <li><a href="#" name="tab1">Glass Windows</a></li> 
    <li><a href="#" name="tab2">Lampshades</a></li> 
    <li><a href="#" name="tab3">Metal and Glass Sculptures</a></li> 
    <li><a href="#" name="tab4">Pi&ntilde;atas</a></li> 
    <li><a href="#" name="tab5">Wood Sculptures</a></li> 
</ul> 
<!-- Content in the accordion --> 
<div id="content"> 
    <img src="images/loader.gif" id="loader"/> 
    <div id="tab1" class="thumbs"></div> 
    <div id="tab2" class="thumbs"></div> 
    <div id="tab3" class="thumbs"></div> 
    <div id="tab4" class="thumbs"></div> 
    <div id="tab5" class="thumbs"></div> 
</div> 

JavaScript

// lines 264-293 
// 
$('#' + tabName).jflickrfeed({ 
    limit: 20, 
    qstrings: { 
     set: photoSet, 
     nsid: '85496792@N03' 
    }, 
    useTemplate: false, 
    itemCallback: function(item){ 
      $(this).append("<a href='" + item.link + "' target='" + "_blank'" + ">" 
         + "<img src='" + item.image_n + "' alt=''/></a>"); 
    } 
}, function (data) { 

    // Special carousel stuff to make the 
    // showcase look spiffy 
    // 
    $('#' + tabName).waterwheelCarousel({ 
     speed: 500, 
     separation: 200, 
     flankingItems: 3 
    }).css('position', ''); 

    // Once the waterwheel is finished loading 
    // we can hide the loader 
    // 
    $("#loader").hide(); 
}); 

ПРИМЕЧАНИЕ: Сайт все еще находится в стадии происходит "отзывчивый" тестирование, так что вещи могут выглядеть немного шероховатой на другой экран размеры ...

Answer 1

Полностью проигнорирована функция complete в объектах изображения. Похоже, что это работает, хотя в Opera и Safari он немного глючит, поэтому причина для всего «скрытого» кода происходит в условном блоке внизу.

$('#' + tabName).jflickrfeed({ 
     limit: 10, 
     qstrings: { 
      set: photoSet, 
      nsid: '118934683@N02' 
     }, 
     useTemplate: false, 
     itemCallback: function(item) { 

     // Where all the action is... 
     // 
     $(this).append("<a class=\"fancybox\" href='" + item.image_b + "' title='(ID# " + item.title + ")'>" + "<img src='" + item.image_n + "' alt='image'/></a>"); 

     // Store the source of the image and convert it 
     // to a string. Keep track of the count too 
     // 
     var img = new Image(); 
     img.src = item.image_n.toString(); 

     photoCount++; 

     // Hide loader gif 
     // 
     if (photoCount == 10 && img.complete === true) { 
      $('#loader').css('visibility', 'invisible'); 
      $('#loader').css('top', 10000).css('left', 10000); 
      $('#loader').hide(); 
     } 
    } 
}); 

Answer 2

Я бы попробовать что-то подобное в вашей $('#' + tabName).jflickrfeed({}); функции

itemCallback: function(item){ 
     $("#loader").show(); //Show the loading Icon 
     $(this).append("<a href='" + item.link + "' target='" + "_blank'" + ">" 
        + "<img src='" + item.image_n + "' alt=''/></a>"); 
} 

Тогда держите $("#loader").hide(); в конце сценария Может быть, после первых нагрузок изображения он скрывает загрузчик IMG, но никогда не сработал, чтобы показать, для остальных изображений.

Очевидно, что функция подачи фликкера вызывает каждое изображение один за другим.

Answer 3

Я думаю, что знаю, где проблема ... jflickerfeed извлекает данные изображения, но не изображения, поэтому вы добавляете их и только тогда браузер выполняет запрос на фактическое получение изображения. Итак, эта задержка, которую вы видите, - это фактически загруженные изображения с фликер-сервера. Теперь, если это так, вам нужно связать что-то с событием загрузки изображений и подсчитать, сколько у вас есть.Что-то вроде этого:

total_images = 0; 
loaded_images = 0; 
$('#' + tabName).jflickrfeed({ 
    limit: 20, 
    qstrings: { 
     set: photoSet, 
     nsid: '85496792@N03' 
    }, 
    useTemplate: false, 
    itemCallback: function(item){ 
      total_images = total_images+1; 
      img = $('<img>').on('load',function(){ 
       loaded_images = loaded_images+1; 
       it (total_images == loaded_images) $('#loader').hide(); 
      }).attr('src',item.image_n); 
      anchor = $('<a>').attr('href',item.link).attr('target','_blank'); 
      anchor.append(img); 
      $(this).append(anchor); 
    } 
}, function (data) { 

    // Special carousel stuff to make the 
    // showcase look spiffy 
    // 
    $('#' + tabName).waterwheelCarousel({ 
     speed: 500, 
     separation: 200, 
     flankingItems: 3 
    }).css('position', ''); 
}); 

Я не уверен, если это проблема, но это имеет смысл: P

EDIT: Вы должны думать, что немного, потому что у вас есть более чем одной вкладки, но вот идея