【问题标题】:How to use your own photos for infinite scroll effect如何使用自己的照片获得无限滚动效果
【发布时间】:2021-06-27 13:12:12
【问题描述】:

我有一个无限滚动项目,我真的不想使用 picsum 和 unsplash 之类的 API 来生成随机照片。我想使用来自互联网某处或本地保存的我自己的照片。我按照教程使我的照片库无限滚动,但我不明白如何将 picsum url 更改为其他内容。最好是本地保存的照片。例如,我可以用从 1 到 20 的数字来命名它们,但是如何编写“获取”部分?

const getImages = async function() {
  const getImageRes = await fetch(
    `https://picsum.photos/v2/list?page=${page}&limit=8`
  );
  const data = await getImageRes.json();
  const loading = document.querySelector(".loading");

  for (let i = 0; i < 8; i++) {
    let ele = document.createElement("img");
    ele.setAttribute("src", data[i].download_url);
    ele.setAttribute("height", "384");
    ele.setAttribute("width", "512");
    document.getElementById("container").appendChild(ele);
  }
  page++;
  loading.classList.remove("show");
};

【问题讨论】:

    标签: javascript html gallery photo


    【解决方案1】:
    const imageSources = [ // Put your image sources in this list
      './images/1.jpg',
      './images/2.jpg',
      './images/3.jpg',
      './images/4.jpg',
      './images/5.jpg'
    ]
    
    for (let i = 0; i < 5; i++) { // Change this 5 to however many images you have (or use for ... in) 
        let ele = document.createElement("img");
        ele.setAttribute("src", imageSources[i]);
        ele.setAttribute("height", "384");
        ele.setAttribute("width", "512");
        document.getElementById("container").appendChild(ele);
      }
      page++;
      loading.classList.remove("show");
    };
    

    【讨论】:

    • 成功了,谢谢!也许也可以将数字更改为字母以按字母顺序对这些照片进行排序?
    • 我的意思是,当然可以随心所欲地命名它们,但这有什么关系呢? imageSource 中列表项的顺序会影响页面中图像的顺序。
    • 哦,我明白了,我认为 imageSource 中的图像顺序不会影响它们的显示方式。再次感谢。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-11-26
    • 2020-10-23
    • 1970-01-01
    • 2023-04-05
    相关资源
    最近更新 更多