Question

我知道标题听起来有些奇怪，我是Ajax的新手。我创建了一个后端管理器，可以在其中上传文件和图片，并创建一个像这样的json文件。

{
"time":"10",
"type":"video",
"media":"demo.mp4"
} 
{
"time":"5",
"type":"pic",
"media":"splash.jpg"
}

我不能做的是使用加载json并向我显示10秒的demo.mp4的脚本创建登录页面：

<video loop muted autoplay class="fullscreen-bg__video">
    <source src="demo.mp4" type="video/mp4">
</video>

之后持续5秒钟splash.jpg等。

<div class="fixed-background">
    <img src="media/splash.jpg" class="myimg" />
</div>

当json阵列计划完成时，它会重新加载json文件，依此类推。我不知道Ajax和Json是否可以这种方式。

对于这个问题，我感到抱歉，但这是我第二天试图完成工作而没有成功。

非常感谢。

Answer 1

这是绝对可能的。您将要使用window.setInterval(callback, time)。这将调用您每隔time毫秒给它的回调函数。例如，如果您使用window.setInterval(function() { console.log('Hi!'); }, 1500)，它将每1.5秒（1500毫秒）将Hi!登录到控制台。

在您的情况下，您要首先加载所有JSON，您可以使用AJAX进行加载。（我假设您的JSON文件中的对象实际上位于数组中，因为这样发布的并排对象实际上并不是有效的JSON。）最简单的现代方法是使用{{1} }，它可以像这样工作（如果您的JSON文件位于fetch上）：

./mediaList.json

在我编写fetch('./mediaList.json') .then(result => result.json()) .then(json => { // Your code here });的位置，您可以访问参数// Your code here，它将包含该文件中的整个JSON对象，供您随意使用。

所以我建议您使用一个变量，例如json，该变量从0开始。在使用上述代码获取JSON之后，启动一个间隔，该间隔调用一个函数，该函数呈现当前对象指向currentIndex，然后使currentIndex递增。

棘手的部分是每个元素显示的时间不同。为此，您需要某种方式将每个元素与其持续时间联系起来。我建议，如果您需要类似的持续时间，请使用currentIndex而不是window.setTimeout。它使用相同的参数执行相同的操作，不同之处在于它仅在您指定的时间之后运行一次，而不是不断重复。您需要在每个对象中包含持续时间，然后在函数运行时，您将从当前对象获取持续时间，并使用当前对象的持续时间再次调用window.setInterval，因此仅在该时间之后更新已经过去了。

Answer 2

我快疯了，我不知道我做了什么，我认为我已经接近一个可能的解决方案，但是它不起作用。

当我加载页面时，我只能看到最后一张图像。

感谢有人帮助我。

my.js

var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', './json/display1.json');
ourRequest.onload = function() {
var ourData = JSON.parse(ourRequest.responseText);
var numeroMedia =  ourData.length;
var currentIndex = 0;

for (var i = 0 ; i < ourData.length; i++){
    var timeSleep = ourData[i].tempo;
    var fileName = ourData[i].file;
    console.log("TEMPO " + timeSleep);
    console.log("FILE " + fileName);
    setInterval(function() {
        var idFile = document.getElementById('myImage');
        idFile.src = fileName;
    }, timeSleep);
}

};

ourRequest.send();

display1.json

[
{"tempo":"1000","file":"./media/pic1.jpg"},
{"tempo":"2000","file":"./media/pic2.jpg"}
]

screen.html

<img src="" id="myImage">

Ajax使用时间间隔和媒体加载Json以在全屏页面上显示

2 个答案: