Javascript 从JQuery返回'；获取'；加载所有图像后

我正在使用jquery

get

将html加载到我的content div中。我正在加载的html包含一些图像，我发现我在javascript中进行的自定义高度计算工作不太好，因为当

loadHTML

返回时，图像已完全加载

    var loadHTML = function(){
          return $.get("javascripts/templates/" + templateType + ".html", function(text) {
              $("#content").html(text);
          });
    };

是否有一种方法，在所有图像加载完毕后，我只能从

loadHTML

返回？我试图调用并返回

load

，但这不起作用

var loadHTML = function() {
    return $.get("javascripts/templates/" + templateType + ".html", function(text) {
        var content = $("#content").html(text);
        return $('img', content).load();
    })
};

另外，我在我的应用程序的其他部分使用Q承诺，所以可以使用它来解决我的问题

---

例如，

loadHTML.then（loadImages.then（doOtherStuff）
您可以尝试使用如下所示的自定义延迟对象

var loadHTML = function () {
    var deferred = $.Deferred();
    $.get("javascripts/templates/" + templateType + ".html", function (html) {
        var $html = $(html),
            $imgs = $html.find('img'),
            len = $imgs.length,
            counter = 0;
        $imgs.load(function () {
            if (++counter == len) {
                deferred.resolve();
            }
        });
        $("#content").html($html);
    });

    return deferred.promise();
};


运输署


var list=[]；
对于（变量i=0；i<5；i++）{
列表。推送（“”）；
}
var html=''+list.join（''）+''；
var loadHTML=function（）{
var deferred=$.deferred（）；
//使用计时器模拟ajax请求
setTimeout（函数（）{
var$html=$（html），
$imgs=$html.find（'img'），
len=$imgs.length，
计数器=0；
$imgs.load（函数（）{
如果（++计数器==len）{
延迟。解决（）；
}
});
$（“#content”）.html（$html）；
}, 500);
延迟返回。承诺（）；
};
loadHTML（）.done（函数（））{
$（“#content”）.find（'img'）.each（function（）{
$（this）.after（this.complete）
})
});
删除了我的另一个答案，因为它太冗长了

代码无法工作的原因是，您正在向服务器发出ajax请求，然后立即从函数返回。页面继续编写脚本，如果在请求返回图像之前完成大部分工作，则可能完成大部分工作

您需要将返回移动到函数中您知道在数据返回之前不会处理的位置。您可以使用承诺来做到这一点：

 var jqxhr = $.get( "example.php", function() {
          alert( "request sent, images are loading" );
        // DON'T PUT YOUR RETURN HERE, 
        //YOU WANT TO CALL IT WHEN THE ABOVE IS DONE
        })
          .done(function() {
            alert( "the info is loaded" );
            //put your html insert here to make sure the 
            //data is fully loaded before you manipulate it
            //you could also call htmlresize here but that would be nesting. 
            //That shit gets complicated. Just call it after this function returns on success.
            return
          })
          .fail(function() {
            alert( "error" );
            // its good to handle errors
            return
          })

如果你不想为了加载一些图像而延迟整个页面的加载，你可以在jqxhr.suces回调中添加html调整大小和其他相关代码，这样当你的图像通过时，其他代码就会被读取。但这很复杂。
谢谢你的回答。我将您的解决方案与Q承诺相结合。在最终结果中允许执行：
loadHTML（）.then（loadImages.then（calcHeight）谢谢你的建议