Я работаю с динамическими вкладками в jQuery . Когда пользователь открывает новую вкладку, содержимое загружается через ajax :
function addTab(tabId) {
$("#tabs").tabs('add', tabId, tabId);
$(tabId).load("...");
}
Я хочу отображать значок загрузки во время загрузки содержимого. Поэтому я устанавливаю содержимое панели вкладок в свойстве add метода tabs:
var $tabs = $("#tabs").tabs({
tabTemplate: '<li><a href="#{href}">#{label}</a></li>',
add: function(event, ui) {
$(ui.panel).append('<div>loading...</div>');
}
});
Пока это прекрасно работает, содержимое вкладки создается с надписью «загрузка ...», а затем заменяется соответствующим содержимым после его извлечения.
Что я хотел бы сделать, так это показать одно из анимированных изображений загрузки. Очевидно, что если мне придется загружать это изображение каждый раз, то это как бы противоречит сути.
Я думаю, мне нужно в фоновом режиме загрузить изображение в память на $ (document) .ready , а затем просто поместить это изображение в мои загрузочные делители, когда они как-то понадобятся. Я не знаю, как это сделать, хотя. Или, может быть, есть гораздо более простое и лучшее решение?
Обратите внимание, что одновременно может быть загружено много вкладок, и не все вкладки загрузки видны (новая вкладка может быть загружена в фоновом режиме, не выходя из текущей вкладки), поэтому достаточно иметь один общий div, который я показываю / скрываю вершина всего остального не работает.
Любые указатели оценены, спасибо.