Displaying image from array in Javascript in setTimeInterval method

Question

I am having little bit difficulty time pausing the image, so it gets rendered. I have images stored in even index in an array (for example: 2, 4, 6). And using for loop , I want to change the image every 2 seconds. On the load of the HTML page, I call onLoad = executeOnLoad() in HTML . The image changes from default to the image that is in sixth index, but after that it is not changing. It stays on that same index although, the console says the i is changing.

function executeOnLoad(){
    for(var i = 0; i < 7; i++){
        if (i%2 == 0) {
            console.log("started.."+i);
            displayImage(i);
        }

    }
}

function displayImage(i){
    console.log("displaying...." + i);
    document.getElementById("initial_image").src = contentArray[i];
}

window.setInterval("executeOnLoad()", 1000);

This is the console output that : ：

started..0
displaying....0
started..2
displaying....2
started..4
displaying....4
started..6
displaying....6 < ---- The image here is displayed but, not changing to other..

I appreciate your help. Thanks.

Answer 1

I've created a fiddle for you that shows even numbers. I've used the if statement instead of the for loop you had because that would run all the loop in one go.

See it working here:

 var contentArray = ["0.png","1.png","2.png","3.png","4.png","5.png","6.png","7.png","8.png"] var i = 0; var numberOfImagesToDisplay = 6; var speedOfAnimation = 1000; function executeOnLoad(){ if(i <= numberOfImagesToDisplay){ if (i%2 == 0) { displayImage(i); i = i+2; } else { i++; } } else { i=0; displayImage(i); } } function displayImage(img){ document.getElementById("initial_image").src = "http://www.marcelogil.com/fiddle/jsloop/" + contentArray[img]; } window.setInterval("executeOnLoad()", speedOfAnimation); 

 <img src="http://www.marcelogil.com/fiddle/jsloop/0.png" id="initial_image" /> 

Answer 2

See this code, with some small changes. The interval does not have a loop inside it, but a single action. Each time the setInterval callback is called (ie every one second) it goes one step further, until reaching the maximum desired length (which is 7, but should probably be contentArray.length ) and then the interval clears itself. Clearing the interval is possible thanks to saving a refernce to it when declaring it ( var interval = window.setInterval(...) and using the clearInterval method.

var i = 0, interval;

function executeOnLoad(){
    i++;
    if (i%2 == 0) {
        console.log("started.."+i);
        displayImage(i);
    }

    if (i >= 7) {
        clearInterval(interval);
    }
}

function displayImage(i){
    console.log("displaying...." + i);
    document.getElementById("initial_image").src = contentArray[i];
}

interval = window.setInterval(executeOnLoad, 1000);

Answer 3

There is no pause in your code. That loop just runs through all of your images and therefore only the last one will "stick".

You can fix this by using settimeout :

console.clear();
document.body.innerHTML = '';
//START
var contentArray = [
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg'
]

var initImg = document.createElement("img");
initImg.id = "initial_image";
initImg.src = '';
document.body.appendChild(initImg);

function executeOnLoad() {
    for (var i = 0; i < 7; i++) {
        if (i % 2 == 0) {
            (function (a) {
                setTimeout(function () {
                    console.log("started.." + a);
                    displayImage(a);
                }, 1000 * (a + 1))
            })(i);
        }

    }
}

function displayImage(i) {
    console.log("displaying...." + i, contentArray[i]);
    document.getElementById("initial_image").src = contentArray[i];
}

executeOnLoad();

Answer 4

Check this:

 var i = 0; var contentArray = []; contentArray.push('https://img.utdstc.com/icons/256/beautiful-life-quotes-android.png'); contentArray.push('https://img.utdstc.com/icons/monospace-android.png'); contentArray.push('https://img.utdstc.com/icons/cloud-print-android.png'); contentArray.push('https://img.utdstc.com/icons/120/desire-the-game-for-couples-android.png'); function displayImage(){ console.log("displaying...." + i); if(i < ((contentArray.length) - 1)){ i++; }else{ i = 0; } document.getElementById("initial_image").src = contentArray[i]; window.setTimeout( displayImage, 4000); } displayImage(); 

 <img id="initial_image"/> 

See a working example on JSFiddle