The problem of picture jitter caused by the execution order of image load method

my code picture loading code is divided into three pieces
1. Load the picture template (there is no src for the picture at this time)
2. Bind the load method (resize the picture dynamically)
3. Add a path to the picture loop

the effect I want is to resize the picture before load, and directly display the adjusted size in the third step.
, however, did not follow my idea. The execution order of
now is: add scr, directly to the image after loading the template, and then execute the load method, so it appears on the interface that the picture becomes larger and then smaller, resulting in visual jitter. Please help Daniel to see how to solve this problem.
the following is the specific code

// 
    that.thumbnailBody.html(thumbnailFragments);
// load
    that.thumbnailBody.find(".thumbnail-cell > .thumbnail-image").find("img").off("load").on("load", function () {
      var width = $(this).parent().width(), height = $(this).parent().height();
      reSizeImage(this, width, height);
    });
// 
    that.thumbnailBody.find(".thumbnail-cell > .thumbnail-image").find("img").each(function (index, img) {
        var item, alt, id;
        item = data[index];
        alt = item.panel_id;
        id = item.panel_id;
        img.src = item.ordinaryPath;
        img.id = id;
        img.alt = alt;
    });