JSFiddle - React, Tailwind, and code Playground

by Anov Siradj

HTML

<!--
Dari stackoverflow :
http://stackoverflow.com/questions/14299917/making-a-simple-javascript-image-gallery/14299952#14299952
http://stackoverflow.com/questions/13982789/cache-dynamic-images-from-array-before-page-loads-using-javascript/13982980#13982980
http://stackoverflow.com/questions/20865458/js-function-to-preload-images-before-page-load/20866086#20866086
-->
<div id="wrap">
    <p id="preImgInfo"></p>
    <img id="imgDisplay" onclick="javascript:setImg();"/>
</div>

CSS

* {
    margin:0px;
}

#wrap {
    display:block;
    position:relative;
    width:90%;
    margin:0px auto;
}
#imgDisplay {
    width:100%;
}

JavaScript

var imgData= new Array();
var preImgInfo = document.getElementById("preImgInfo");
var imgDisplay = document.getElementById("imgDisplay");
var imgIndex = 0;
imgData.push("https://66b1129f0575c2a6c318b0b18736cb1f918d3747.googledrive.com/host/0B5QQvAjRq64hUDVYT1ZDak5Fc0E/cs1.png");
imgData.push("https://66b1129f0575c2a6c318b0b18736cb1f918d3747.googledrive.com/host/0B5QQvAjRq64hUDVYT1ZDak5Fc0E/cs2.png");
imgData.push("https://66b1129f0575c2a6c318b0b18736cb1f918d3747.googledrive.com/host/0B5QQvAjRq64hUDVYT1ZDak5Fc0E/cs3.png");

function setImg() {
    if(imgIndex > imgData.length-1) {
        imgIndex = 0;
    }
    preImgInfo.innerHTML = "Memuat gambar...,";
    imgDisplay.removeAttribute("src");
    preImg();
    imgIndex++;
}
function preImg() {
    var oneImg = new Image();
    oneImg.src = imgData[imgIndex];
    oneImg.onload = function( ) {
        imgDisplay.src = oneImg.src;
        preImgInfo.innerHTML = "Klik gambar untuk melihat gambar selanjutnya.";
    }
}
setImg();