javascript - 在 jQuery .load() 内容完全准备好后执行 javascript 函数

Question

我有一个模态框，我填充了用 ajax jQuery .load() 函数加载的内容。主要问题是只有在 ajax 内容（例如：图像、文本等）在隐藏模式中完全加载后，我才能执行另一个功能。

例如：我需要根据它的宽度和高度将模态框居中，如下所示：

    var modalbox = $('.modalbox');

        function centermodal(a){                    

            overlayWidth = a.width(),
            overlayHeight = a.height();

            a.css({                     
                'margin-top':'-'+overlayHeight/2+'px',
                'margin-left':'-'+overlayWidth/2+'px'
            }); 

            a.show(); //show the box                    

        }

然后我在负载中执行这个函数，但如果它包含图像或任何额外的内容，它不会计算模态的正确高度：

modalbox.load('page1.html','',function(){
    centermodal(modalbox);
});

我相信我需要创建某种加载器或在显示之前检查加载的内容。也许有人可以提出解决方案？

谢谢你。

Answer 1

jQuery Deferred对象是完成这项工作的工具。当 AJAX 调用完成时，使用deferred.done()函数调用函数。