JSFiddle - React, Tailwind, and code Playground

by guest271314

HTML

<div id="imgs"></div>

JavaScript

$(function () {
    var imgs = new Array(1000);
    _imgs = $.map(imgs, function (v, k) {
        return v === void(0) ? "<img width=200px src="+""+" />" : null
    }).join("");
    var request = $.post("/echo/html/", {
        html: _imgs
    });
    request.done(function (data, textStatus, jqxhr) {
        var html = $.parseHTML(data, div, false),
            len = html.length,
            div = $("div");

        div.on("imgsready", function(e, htmlimgs, divimgs) {
          console.log("ready", htmlimgs, divimgs);
            $(e.target).prepend(divimgs + " images ready<br>" )
        });
        $.when(div.html(html)
               , $("img", div)
               .load(function(e) {
                   return $(e.target).promise()
               })
              )
        .then(function (el, i) {  
            console.log(el.children(i).eq(len -1).is("*"));
            return el.children(i).length === (i.length && len) 
                   && el.children(i).eq(len -1).is("*") 
                      ? el.trigger("imgsready", [len, i.length])  
                      : setTimeout(function() {
                          el.trigger("imgsready", [len, i.length])
                        },1000)
        });      
    })
})