Javascript 使用Ajax将图像拉入div，如何在调用之前向div添加高度，然后在加载图像后将其删除？

我正在使用一个表单和Ajax动态拉取一个图像以替换.results div中的另一个图像。我的第一次尝试成功了，但是当图像被删除时页面会跳起来，而当图像被加载时页面会跳下来。我想我可以添加style属性来赋予div一个高度，然后在加载图像后删除style属性。我下面的内容在70%的时间内有效，另外30%的时间在加载图像之前删除了stye属性，页面跳转仍然存在。是否有办法仅在图像完全加载后删除“样式”属性？或者设置一个延迟什么的？我是一个JS和AjaxNoob，所以请温柔一点

        (function($){
        $(function(){
            var $form   = $('#customize'), // Search form
                $target = $('.results'), // Results container
                rp      = 'product_search/results_only_ajax'; // Template for results only

            // Function to execute on success
            var success = function(data, status, xhr) {
                $target.html(data);
                $('.loading').html('<p></p>');
                // Remove style
                $('.results').removeAttr("style");
            };

            // Hijack the form on submit
            $form.submit(function(){

                // Tell target we're loading
                $('.loading').html('<p>Loading...</p>');
                // get height of container, and set height
                currentHeight = $('.results').outerHeight();
                $('.results').css("height", currentHeight);

                // Add custom result page to data
                var data = $form.serialize()
                         + '&result_page=' + rp;

                // Perform the ajax call
                $.ajax({
                    type: 'POST',
                    url: $form.attr('action'),
                    data: data,
                    success: success,
                    dataType: 'html'
                });

                // Don't submit the form afterwards
                return false;
            });
        });
    })(jQuery);

（函数（$）{
$（函数（）{
var$form=$（'#customize'），//搜索表单
$target=$（'.results'），//结果容器
rp='product\u search/results\u only\u ajax'；//仅用于结果的模板
//函数在成功时执行
var success=函数（数据、状态、xhr）{
$target.html（数据）；
$（'.loading'）.html（'
'）；
//删除样式
$（'.results'）.removeAttr（“样式”）；
};
//在提交时劫持表单
$form.submit（函数（）{
//告诉目标我们正在装货
$（'.loading'）.html（'loading…
'）；
//获取容器的高度，并设置高度
currentHeight=$（'.results'）.outerHeight（）；
$（'.results'）.css（“高度”，当前高度）；
//将自定义结果页添加到数据
var data=$form.serialize（）
+“&result_page=”+rp；
//执行ajax调用
$.ajax({
键入：“POST”，
url:$form.attr（'action'），
数据：数据，
成功：成功，
数据类型：“html”
});
//不要事后提交表格
返回false；
});
});
})（jQuery）；

编辑：

//成功时执行的函数
var success=函数（数据、状态、xhr）{
$target.html（数据）；
$（'.loading'）.html（'
'）；
//$（'.results'）.removeAttr（“样式”）；
setTimeout（函数（）{
$（'.results'）.removeAttr（“样式”）；
}, 1000);
};

我在成功函数（在上面的编辑中）上添加了一个超时，现在可以正常工作。

我在成功函数上添加了一个超时，但这是最好的方法吗？从我的方式推断，有时页面跳转仍然会发生，因为在加载图像之前删除了高度样式。设置计时器使图像有足够的机会在删除“样式”属性之前加载。但是我不确定这是否是最好的方法。理论上html（）是同步的，这意味着你不需要时间。不管怎么说，我也注意到有时候它并不像预期的那样工作。可以使用jQuery.load（）异步加载图像，也可以使用successcallback添加样式。您也可以尝试这样做：-它仍然是一个超时函数，但它检查加载元素的存在性，因此，如果浏览器花费的时间比预期的长，它不会中断

            // Function to execute on success
            var success = function(data, status, xhr) {
                $target.html(data);
                $('.loading').html('<p></p>');
                // $('.results').removeAttr("style");
                setTimeout(function () {
                    $('.results').removeAttr("style");
                }, 1000);
            };