Question

我正在为一个网站构建一个网页，用作心理实验（用于从用户收集数据）。

页面应按此顺序执行：
1.显示加号图像250毫秒。
2.显示来自图像阵列的图像750毫秒。
3.显示包含用户想要回答的问题的表单，依此类推。

我需要重复这些步骤，而我还没有完成显示我阵列中的所有图像。
HTML代码我有：

        <img src="http://brain.netii.net/images/Blank.png" id="pictures" name="pictures"/>

        <form id="inputs" action="#" class="validate" method="post">

                <label class="quesLabel" for="assoInput1">First association:</label>
                  <div>
                    <input required pattern="([a-z]*|[A-Z]*|[ \t]*)*" type="text" id="assoInput1" name="asso1" title="please enter first association" autocomplete="off" value="">
                  </div>
            <br>
            <input type="submit" value="Submit">
        </form>

CSS代码我有：

    #container
    {
        width: 960px;
        padding: 0;
        margin: 0 auto;
    }
    #pictures
    {
        width: 960px;
        height: 720px;
        padding: 0;
    }
    #inputs
    {
        width: 960px;
        height: 720px;
        margin: 100px 50px;
        display: none;
    }

JS代码我有：

window.onload = function() 
{
    preloader();
    pictureImg = document.getElementById("pictures");
    inputForm = document.getElementById("inputs");

            inputForm.onsubmit = function() 
            {
                //alert('Form: onsubmit func');
                LoadPlus();
            };
            LoadPlus();
            //LoadImage();
        };

        function LoadPlus() 
        {
            inputForm.style.display="none";
            //stop condition:
            if (imagesArr.length <= 0) //hope that here is no error here
            {
                //alert("All images loaded");
                window.location.href = "start_experiment.html";
            }

            var url = plus;
            var img = new Image();
            img.src = url;
            img.onload = function()
            {
                //alert("Plus loaded.");
                setTimeout(LoadImage, 250); 
            };

            pictureImg.src = img.src;
            pictureImg.style.display="block";
        }

        function LoadImage() 
        {   
            var randomNum;

            if (imagesArr.length > 0)
            {
                randomNum = Math.floor(Math.random() * imagesArr.length);
                console.log(imagesArr[randomNum]);
            }
            else
            {
                alert ("ERROR: out of array boundaries!");
            }

            var url = "http://brain.netii.net/images/Practice" + imagesArr[randomNum] +".png";
            imagesArr.splice(randomNum, 1);
            var img = new Image();
            img.src = url;
            img.onload = function()
            {

                //alert("image #" + randomNum + " loaded, loading next..");
                setTimeout(LoadForm, 750);
            };

            pictureImg.src = img.src;
        }

        function LoadForm()
        {
            //blank only pictures div
            inputForm.reset();
            inputForm.style.display="block";
            pictureImg.style.display="none";
            //alert('Form loaded'); 
        }

在这里，您可以看到page。

我的问题从提交表单开始，onload触发器加载加号图像两次而不是一次（有时候第一个加号显示的时间很短，有时甚至会显示加号后看到的图片）。

还有其他方法可以实现吗？有人可以帮助我吗？

谢谢你，Max。

Answer 1

我的建议是以编程方式表达您的每个请求。标记，样式和脚本保持简单。它不是为优化和速度而编写的，而是作为现有代码的替代产品。请找到对您的用例有用和适用的内容。

通过将所有图片（包括加号图片）放入标记中，您可以根据需要轻松引用它们，而无需重复.onload()和LoadImage()内的不必要LoadPlus()次调用。< / p>

onload触发器不应该加载更多图像，因为它发生......

when all content (e.g. images) also has been loaded.

<!-- index.html -->
<!-- Loads but hides all images from appearing onload. -->
<head>
  <style> img { display: none; } </style>
</head>
<body>
  <img id="plus" src="http://brain.netii.net/images/Plus.png">
  <img id="picture" src="http://brain.netii.net/images/Practice7.png">

  <form id="superform">
    <label for="first">First association:</label>
    <input type="text" name="name">
    <label for="second">Second association:</label>
    <input type="text" name="name">
    <label for="third">Third association:</label>
    <input type="text" name="name">
    <input type="submit" value="Submit" id="submit">
  </form>

  <script>
    // `window.onload` only runs when all content from the DOM (example: images) has been loaded
    window.onload = function () {

        var submit = document.getElementById('submit');

        // Set an event listener anytime the submit is clicked
        submit.addEventListener('click', function (event) {

            // Assuming the method is defined, this prevents an actual "submission" from occuring
            if (event.preventDefault) {
                event.preventDefault();   
            }

            // Immediately hide the form and show the plus symbol
            document.getElementById('superform').style.display = 'none';
            document.getElementById('plus').style.display = 'block';    

            // Run this timer 250ms after the click event occurs
            window.setTimeout(function () {

                // Immediately hide the plus but show the picture
                document.getElementById('plus').style.display = 'none';
                document.getElementById('picture').style.display = 'block';

                // Run this timer 1000ms (1 second) after the click event occurs
                window.setTimeout(function () {

                    // Immediately hide the picture but show the form again.
                    document.getElementById('picture').style.display = 'block';         
                    document.getElementById('superform').style.display = 'block';
                }, 1000); // 2nd timer ends.
            }, 250); // 1st timer ends.
        }, false); // end of `submit` event listener.
    } // end of `onload` callback definition.
  </script>
</body>

图像onload触发器使用Javascript

1 个答案: