JSFiddle - React, Tailwind, and code Playground

by Andy BigBoy

HTML

<img id="theimg" height="100"/>

<h3>issues</h3>
<ul id="issues">
    <li data-img="http://www.atylia.com/11297-16655-thickbox/tableau-design-elephant.jpg">aaa</li>
    <li data-img="http://galerie.alittlemarket.com/galerie/product/4868/peinture-tableau-pour-enfant-les-elephants-1410665-les-elephants0-4d870_570x0.jpg">bbb</li>
    <li>ccc</li>
</ul>

CSS

#issues > li { cursor:pointer; }

JavaScript

$("#issues > li").click(function(){
    var $img = $("#theimg");
    var $li = $(this);
    var newsrc = "";
    
    // check if there is html5 data-img atribute
    newsrc = $li.data("img");
    
    // if not, use the natural order to generate file path
    if(newsrc === undefined)
        newsrc = "issue"+$li.index()+".jpg";
    
    var loadstep = 0;
    function endstep(){ // end of preload or hide
        if(++loadstep === 2) // if the preload is done and hide too, change src and show picture
            $img.attr("src",newsrc).animate({opacity:1});
    }

    // preload picture
    var $tmpimg = $("<img/>",{src:newsrc}).on("load",endstep);
    // hide container picture
    $img.animate({opacity:0},endstep);
});