无服务器环境下随机图片无限滚动功能失效问题求助

嗨，我一眼就看到问题出在哪啦！你把图片数据从JSON文件移到本地var变量后，居然还在用fetch()去处理它——这可不行哦！fetch()是用来发起网络请求拿远程资源（比如你之前的JSON文件）的，现在imgJson已经是一个现成的JavaScript对象了，完全不需要再走fetch那套异步解析流程。

直接修改你的getData函数就能解决问题，去掉多余的网络请求逻辑，直接用本地的对象就行：

var imgJson = {"items":[{"id": 1,"img": 'https:\/\/picsum.photos\/200\/300'},{"id": 2,"img": 'https:\/\/picsum.photos\/201\/301'},{"id": 3,"img": 'https:\/\/picsum.photos\/202\/302'},{"id": 4,"img": 'https:\/\/picsum.photos\/203\/303'}]}

getData();
function getData(){
  let main = document.querySelector("main");
  console.log("loading local image data");
  // 直接遍历本地的imgJson数组，不需要fetch
  imgJson.items.forEach(item => {
    let fig = document.createElement("figure");
    let img = document.createElement("img");
    img.src = item.img;
    fig.appendChild(img);
    main.appendChild(fig);
  });
}

$(document).ready(function(){
  $(".button").click(function(){
    $(this).addClass("active");
    setTimeout(function(){
      $(".button").removeClass("active");
    },2000);
  });
});

补充说明： #

• 这样修改后，点击"Load more"按钮就会直接读取本地的图片数据，创建图片元素并渲染到页面，完全不需要依赖服务器。
• 你URL里的转义斜杠\/是正常的，JavaScript会自动解析成普通的/，不会影响图片加载。
• 如果后续要加更多图片，直接往imgJson.items数组里追加新的对象就行，比如：

  var imgJson = {"items":[
    {"id": 1,"img": 'https:\/\/picsum.photos\/200\/300'},
    {"id": 2,"img": 'https:\/\/picsum.photos\/201\/301'},
    {"id": 5,"img": 'https:\/\/picsum.photos\/204\/304'}, // 新增图片
    {"id": 6,"img": 'https:\/\/picsum.photos\/205\/305'}  // 新增图片
  ]}
  

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