2010-12-02 23 views
2

Я использую этот фрагмент кода, который я нашел из учебника, чтобы включить разбиение на страницы Ajax на моем сайте Wordpress. Все это работает, но я хотел бы немного улучшить его.Wordpress ajax pagination

В тот момент, когда вы нажимаете кнопку следующей страницы, есть небольшая пауза, где ничего не происходит. Я хотел бы отобразить одно из изображений типа «Ожидание», подобных этому (http://www.costacruises.co.uk/B2C/Images/Skin/Default/gfx/ico_waiting.gif), но не знаю, как я сделай это.

Heres код, который я использую.

jQuery('#postPagination a').live('click', function(e){ 
    e.preventDefault(); 
    var link = jQuery(this).attr('href'); 
    jQuery('#content-inner').fadeOut(500).load(link + ' #content-inner', function(){ jQuery('#content-inner').fadeIn(500); }); 
}); 

Благодаря

ответ

1

Вам нужно создать элемент «загрузки», поместите его правильно с помощью CSS и установить на дисплей: нет. Функции FADEOUT и FadeIn JQuery поддерживают спецификацию обратных вызовов, так что вы бы изменить код выше, чтобы что-то больше, как это

jQuery('#postPagination a').live('click', function(e){ 
    e.preventDefault(); 
    var link = jQuery(this).attr('href'); 
    jQuery('#content-inner').fadeOut(500, function(){ 
      jQuery("#spinner").show(); 
    }).load(link + ' #content-inner', function(){ jQuery('#content-inner').fadeIn(500, function(){ 
      jQuery("#spinner").hide(); 
    }); }); 
}); 

меняющегося «#spinner» к идентификатору или классу вашего загрузочного элемента.