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

使用jQuery.load时防止div崩溃

2 个答案: