带有json的随机图片库？ [关闭]答案

【问题标题】：Random Image Gallery with json? [closed]带有json的随机图片库？ [关闭]
【发布时间】：2020-05-19 09:54:17
【问题描述】：

我正在尝试使用 json 文件制作无限滚动的随机图像。我成功了，问题是，这应该在没有任何服务器的情况下工作。
所以我试图将所有信息放在一个“var”中，但现在这些图像不再加载了。
有没有办法在不需要服务器的情况下修复它？
这是我目前所拥有的：

HTML：


<body>
    <main>

    </main>

    <div class="container">
        <div class="text-center">
            <button onclick="setTimeout(getData,2000); return false" type="submit" id="button" value="Load more" class="button">
                    Load more</button>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5/jquery.min.js"></script>
    <script src="main.js"></script>
    <script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
</body>

现在用 var imgJson 编写的所有内容都在 images.txt 中。
现在，我看到其他人在 var 中编写它，所以我这样做了，但它不起作用。
公平地说，我昨天才了解 JSON，所以我对它还很陌生。

JS：

// const URL = "images/images.txt"
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("fetch some data");
    fetch(imgJson)
    .then(response => response.json())
    .then(data => {
        data.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);
    });
});

CSS（只有图像部分）：


main {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 1rem;
        width: 80vw;
        margin: auto;
        grid-template-rows: auto;
      }


main figcaption {
    font-size: 1rem;
    font-family: inherit;
}
main img {
    width: auto;
    height: auto;
    max-width: 100%;
}

【问题讨论】：

您不必fetch JSON。抓取基本上是下载或上传。只需遍历imgJson var 即可。
这不会导致问题，但您不必在 JS 对象中转义正斜杠。例如https:\/\/picsum.photos\/200\/300

标签： javascript json random image-gallery

【解决方案1】：

不需要.fetch() 变量imgJson，它只是一个JavaScript Object。您可以使用 JavaScript 循环遍历 Objects 和 Arrays。

// const URL = "images/images.txt"
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("fetch some data");
  imgJson.items.forEach(item => {
    let fig = document.createElement("figure");
    let img = document.createElement("img");
    img.src = item.img;

    fig.appendChild(img);
    main.appendChild(fig);
  });
}

main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1rem;
  width: 80vw;
  margin: auto;
  grid-template-rows: auto;
}

main figcaption {
  font-size: 1rem;
  font-family: inherit;
}

main img {
  width: auto;
  height: auto;
  max-width: 100%;
}

<main>
</main>
<div class="container">
  <div class="text-center">
    <button onclick="setTimeout(getData,2000); return false" type="submit" id="button" value="Load more" class="button">Load more</button>
  </div>
</div>

我注意到您有一个不必要的 setTimeout 函数。我将向您展示Promises 的方法。因为它也使代码异步。一旦添加了所有图像，它就会发回一些东西。

不需要.fetch() 变量imgJson，它只是一个JavaScript Object。您可以使用 JavaScript 循环遍历 Objects 和 Arrays。

// const URL = "images/images.txt"
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().then(a => console.log(a));

function getData() {
  return new Promise((resolve, reject) => {
    let main = document.querySelector("main");
    console.log("fetch some data");
    imgJson.items.forEach(item => {
      let fig = document.createElement("figure");
      let img = document.createElement("img");
      img.src = item.img;

      fig.appendChild(img);
      main.appendChild(fig);
    });
    resolve('done');
  });
}

main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1rem;
  width: 80vw;
  margin: auto;
  grid-template-rows: auto;
}

main figcaption {
  font-size: 1rem;
  font-family: inherit;
}

main img {
  width: auto;
  height: auto;
  max-width: 100%;
}

<main>
</main>
<div class="container">
  <div class="text-center">
    <button onclick="getData().then(a => console.log(a))" type="submit" id="button" value="Load more" class="button">Load more</button>
  </div>
</div>

【讨论】：

谢谢 :) 没想到这么简单
我添加了另一个示例（没有setTimeout，但与 Promises 异步）。一旦 Promise 解决，它会立即向您发送一条消息。这也可能对您有所帮助。

【解决方案2】：

如果您想要一个按钮来替换 <img> 元素的 src 属性，每次使用不同的图像，那么您可以在此处查看我的 JSFiddle 示例：https://jsfiddle.net/f0a2s6pg/

否则，这里是一个代码sn-p：

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

var amount = 0
document.getElementById('imageBtn').onclick = function () {
    console.log("Replacing image...");
    document.getElementById("image").setAttribute("src", imgJson.items[amount].img);
    console.log(amount);
    if (amount == 3) {
        amount = 0;
    } else {
        amount++;
    }
}

<img id="image" src="https://picsum.photos/203/303" style="display: block;">
<button id="imageBtn" style="margin-top: 10px;">Random image</button>

【讨论】：