JSFiddle - React, Tailwind, and code Playground

dynamically create images only if they exist in the server

by Akram kamal

HTML

<ul>
  <li><img class='first' src='http://incursionmorocco.com/test/a/1.jpg'></li>
</ul>
<ul>
  <li><img class='first' src='http://incursionmorocco.com/test/b/1.jpg'></li>
</ul>

JavaScript

$('ul').each(function() {
    var e = $(this)
    for(var i = 2; i < 10; i++) {
        (function(i) {
            var image = new Image()
            image.onload = function() {
                e.append('<li><img src="' + image.src + '"></li>')
            }
            image.onerror = function() {
              //  e.append('<li>' + image.src + '</li>')
            }
            console.log(i)
            image.src = e.find('img.first').attr('src').replace(/\d/, i)
        })(i)
    }
})