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