使用 jQuery.load 时防止 div 折叠

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;
});

（Project 是 Wordpress 中的分面搜索）。

谢谢！

Answer 1

您可以使用 $.ajax() 加载内容并将 div 的 html 设置为它返回的内容...

$.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;
    });
});