Images onload trigger using Javascript

Question

I am building a web page for a website that will be used as psychological experiment (for gathering data from users).

The page should act in this order:
1. Show plus image for 250 ms.
2. Show am image from an array of images for 750 ms.
3. Show a form containing a question on which the user is suppose to answer, and so on.

I need to iterate those steps while i haven't finished to show all the images at my array.
HTML code i have:

        <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 code i have:

    #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 code i have:

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'); 
        }

Here you can see the page.

My problem starts on submitting the form, the onload trigger loads the plus image twice instead of once (sometimes the first plus shown for a short amountt of time and sometimes it even shows the picture that shuld be seen after the plus).

Is there another way to implement this? Could anyone please assist me?

Thank you, Max.

score 0 · Answer 1 · edited May 23 '17 at 12:15

My suggestions are here are meant to express each of your requests in a programmatic way. Markup, styling, and script have been kept simple. It is not written for optimization nor speed, but as an alternative offering to your existing code. Please what you find helpful and applicable to your use case.

By placing all of your images (including the plus image) in the markup, you can easily reference them as needed without repeating the needless .onload() invocations within LoadImage() and LoadPlus().

The onload trigger should not be loading more images, since it occurs...

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>

Images onload trigger using Javascript

1 Answers1