加载所有图像后从 JQuery 'get' 返回答案

【问题标题】：Returning from JQuery 'get' when all images have loaded加载所有图像后从 JQuery 'get' 返回
【发布时间】：2014-11-12 03:08:54
【问题描述】：

我正在使用 jquery get 将 html 加载到我的内容 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 Promise，所以可以使用它来解决我的问题。

即。 loadHTML.then(loadImages).then(doOtherStuff);

【问题讨论】：

标签： javascript jquery html q

【解决方案1】：

您可以尝试使用如下所示的自定义延迟对象

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 = [];
for (var i = 0; i < 5; i++) {
  list.push('<span><img src="//placehold.it/64&text=' + (i + 1) + '" /></span>');
}

var html = '<div>' + list.join('') + '</div>';

var loadHTML = function() {
  var deferred = $.Deferred();
  //using a timer to simulate ajax request
  setTimeout(function() {
    var $html = $(html),
      $imgs = $html.find('img'),
      len = $imgs.length,
      counter = 0;
    $imgs.load(function() {
      if (++counter == len) {
        deferred.resolve();
      }
    });
    $("#content").html($html);
  }, 500);

  return deferred.promise();
};

loadHTML().done(function() {
  $("#content").find('img').each(function() {
    $(this).after(this.complete)
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content"></div>

演示：Fiddle
Demo：Problem(改变图片大小看问题)

【讨论】：

感谢您的回答。我将您的解决方案与 Q 承诺相结合。最终结果允许这样做：loadHTML().then(loadImages).then(calcHeight); 感谢您的建议

【解决方案2】：

删除了我的另一个答案，因为它太罗嗦了。

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

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

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

如果您不想等待整个页面加载来加载一些图像，您可以做一些花样的事情，例如将 html 调整大小和其他相关代码放在 jqxhr.sucess 回调中，以便在您的图像通过时读取其他代码.但这很复杂。

【讨论】：