用javascript加载HTML文件

Question

我需要将一个HTML文件的内容加载到一个div中。

我正在使用以下javascript代码

function scroll_down() {
  var div = $('#div_name');
  $.get('html_file_to_load.html', function(data) { 
      div.html(data);
      $('body, html').scrollTop(div[0].scrollHeight);
  })
}

函数加载html_file_to_load.html文件，将内容添加到div中，然后向下滚动页面。问题是HTML文件可能包含一些图片

示例< img src='picture.jpg' >

在这种情况下发生的事情是，HTML代码加载后，滚动条被设置到底部，浏览器加载图片和页面的垂直高度增加!!

我需要添加一个检查:在执行scrollTop(div[0].scrollHeight);

之前，浏览器必须等待，直到最终包含在其中的HTML文件和图片文件全部加载;我该怎么做?

Answer 1

您可以为图像添加事件侦听器，并在加载时强制它滚动

function forceScroll(elem) {
  $('body, html').scrollTop(elem.scrollHeight);
}
function scroll_down() {
  var div = $('#div_name');
  $.get('html_file_to_load.html', function(data) {
      var html = $(data);
      var imgs = html.find("img");
      imgs.each(function() {
        $(this).on("load", function() {
          forceScroll(div[0]);
        });
      });
      div.append(html);
      forceScroll(div[0]);
    }
  });
}