使用Javascript的图像加载触发器

Images onload trigger using Javascript

本文关键字：加载 触发器 图像 Javascript 使用      更新时间：2023-09-26

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

页面应按以下顺序操作：
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'); 
        }

在这里你可以看到页面。

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

有没有其他方法可以实现这一点？有人能帮我吗？

谢谢你，Max

我在这里的建议旨在以编程的方式表达您的每个请求。标记、样式和脚本一直保持简单。它不是为了优化或速度而编写的，而是作为现有代码的替代产品。请说明您认为对您的用例有用和适用的内容。

通过将所有图像（包括加号图像）放置在标记中，您可以根据需要轻松地引用它们，而无需在LoadImage()和LoadPlus()中重复不必要的.onload()调用。

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

当所有内容（例如图像）也已被加载时。

<!-- 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>
相关文章：