个人中心
gpt4 book ai didi

javascript - 使用 Javascript 的图像加载触发器

转载 作者：行者123 更新时间：2023-11-28 09:08:48 25 4
gpt4 key购买 nike

我正在为将用作心理实验(用于收集用户数据)的网站构建网页。

页面应按以下顺序操作:
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 触发器加载加号图像两次而不是一次(有时第一个加号显示很短的时间，有时它甚至显示应该在加号之后看到的图片)。

还有其他方法可以实现吗？谁能帮帮我？

谢谢你，马克斯。

最佳答案

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

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

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>

关于javascript - 使用 Javascript 的图像加载触发器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26572402/

25 4 0
文章推荐： javascript - JQuery Coin slider 不显示图像
文章推荐： html - 使用主页滚动条滚动 div
文章推荐： css - 通过CSS防止对第一个元素的悬停效果
文章推荐： javascript - 页面加载后加载 Google adsense
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com