使用 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);
  })
}

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

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

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

我需要添加一个检查：浏览器必须等到 HTML 文件和最终包含在其中的图片文件都加载完毕，然后再执行 scrollTop(div[0].scrollHeight);

我怎样才能做到这一点？

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