Предотвращение сворачивания div при использовании jQuery.load

Question

Я загружаю внешний контент, чтобы заменить DIV.

Проблема в том, что когда ajax-loader.gif заменяет исходный контент, страница сжимается по высоте и полоса прокрутки может исчезнуть.Как только внешний контент загружен, полоса прокрутки появляется снова.Этот рывок лишает гладкости.

Есть ли более плавный путь?Может быть, сохранить высоту div, пока внешний контент не будет загружен?Я не могу использовать фиксированные высоты.Вот моя функция:

function(){
    $('.filter a').click(function(){
    $('#mydiv').html('<p><img src="ajax-loader.gif" /></p>');
    $('#mydiv').load('/site/?key=Value');
  return false;
});

(проект - это граненый поиск в Wordpress).

Спасибо!

Answer 1

Вы можете загрузить контент с помощью $ .ajax () и установить html для div на контент, который он возвращает ...

$.ajax({
  url: '/site/?key=Value',
  success: function(data) {
    $('#mydiv').html(data);
  }
});

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

var storedHeight = $('#mydiv').height();
$('#mydiv').html('<p><img src="ajax-loader.gif" /></p>').find('p').height(storedHeight);

Answer 2

вы пробовали установить минимальную высоту?

что-то вроде этого может работать:

$(function(){
    $('.filter a').click(function(){
       var height = $('#mydiv').height();
        $('#mydiv').attr('style', 'min-height:' + height);
        $('#mydiv').html('<p><img src="ajax-loader.gif" /></p>');
        //changed            
        $('#mydiv').load('/site/?key=Value', function(){
            $('#mydiv').removeAttr('style');
            $('#mydiv').attr('style', 'height:auto;');            
        });
        //end of changed
        return false;
    });
});