修复无限滚动中jQuery Load()返回[object Object]的问题

问题核心 #

按照滚动加载逻辑实现无限滚动页面时，尝试用jQuery的load()方法在动态生成的卡片中加载1.html、2.html等外部HTML文件，页面却显示[object Object]而非预期的文件内容。

错误原因 #

1. 返回值类型问题：jQuery的load()方法返回的是jQuery对象，直接将其赋值给DOM元素的innerHTML属性时，会触发对象的toString()方法，结果就是[object Object]。
2. 元素不存在：代码中$('#card')选择的元素此时还未被添加到DOM中，选择器无法找到目标元素，load操作本身不会生效。
3. 异步逻辑错误：load()是异步操作，不能同步赋值给innerHTML，必须在回调中处理加载完成后的逻辑。

解决方案 #

方法一：使用jQuery处理异步加载 #

修改createCard函数，直接用jQuery创建卡片元素，通过load()的回调完成后续样式设置和DOM插入，同时根据卡片索引加载对应HTML文件：

const createCard = (index) => {
  // 创建jQuery卡片元素
  const $card = $('<div class="card"></div>');
  // 加载对应索引的HTML文件，如需加载特定部分可写成`${index}.html #目标元素ID`
  $card.load(`${index}.html`, () => {
    $card.css('backgroundColor', getRandomColor());
    $(cardContainer).append($card);
  });
};

方法二：使用原生JS Fetch API加载HTML #

如果不想依赖jQuery，可使用原生Fetch API处理异步请求，直接获取并赋值HTML内容：

const createCard = async (index) => {
  const card = document.createElement("div");
  card.className = "card";
  card.style.backgroundColor = getRandomColor();
  
  try {
    // 发起请求获取对应HTML文件
    const response = await fetch(`${index}.html`);
    if (!response.ok) throw new Error(`加载${index}.html失败`);
    const htmlContent = await response.text();
    card.innerHTML = htmlContent;
  } catch (err) {
    // 处理加载失败场景
    card.innerHTML = `<p>加载失败：${err.message}</p>`;
  }
  
  cardContainer.appendChild(card);
};

完整修改后代码示例（方法一） #

<div id="card-container">
  <div id="loader">
    <div class="skeleton-card"></div>
    <div class="skeleton-card"></div>
    <div class="skeleton-card"></div>
  </div>
</div>
<div class="card-actions">
  <span>Showing 
    <span id="card-count"></span> of 
    <span id="card-total"></span> cards      
  </span>
</div>

<script>
{literal}
const cardContainer = document.getElementById("card-container");
const cardCountElem = document.getElementById("card-count");
const cardTotalElem = document.getElementById("card-total");
const loader = document.getElementById("loader");

const cardLimit = 99;
const cardIncrease = 9;
const pageCount = Math.ceil(cardLimit / cardIncrease);
let currentPage = 1;

cardTotalElem.innerHTML = 99;

var throttleTimer;
const throttle = (callback, time) => {
  if (throttleTimer) return;

  throttleTimer = true;

  setTimeout(() => {
    callback();
    throttleTimer = false;
  }, time);
};

const getRandomColor = () => {
  const h = Math.floor(Math.random() * 360);
  return `hsl(${h}deg, 90%, 85%)`;
};

// 修改后的createCard函数
const createCard = (index) => {
  const $card = $('<div class="card"></div>');
  $card.load(`${index}.html`, () => {
    $card.css('backgroundColor', getRandomColor());
    $(cardContainer).append($card);
  });
};

const addCards = (pageIndex) => {
  currentPage = pageIndex;

  const startRange = (pageIndex - 1) * cardIncrease;
  const endRange = currentPage == pageCount ? cardLimit : pageIndex * cardIncrease;

  cardCountElem.innerHTML = endRange;

  for (let i = startRange + 1; i <= endRange; i++) {
    createCard(i);
  }
};

const handleInfiniteScroll = () => {
  throttle(() => {
    const endOfPage = window.innerHeight + window.pageYOffset >= document.body.offsetHeight;

    if (endOfPage) {
      addCards(currentPage + 1);
    }

    if (currentPage === pageCount) {
      removeInfiniteScroll();
    }
  }, 1000);
};

const removeInfiniteScroll = () => {
  loader.remove();
  window.removeEventListener("scroll", handleInfiniteScroll);
};

window.onload = function () {
  addCards(currentPage);
};

window.addEventListener("scroll", handleInfiniteScroll);
{/literal}
</script>

内容的提问来源于stack exchange，提问作者Nounours