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;
    });

according to your practice and description, jitter occurs in

var width = $(this).parent().width(), height = $(this).parent().height();
reSizeImage(this, width, height);

you can see the problem caused by the inconsistency between the width and height of the image (the original width and height or the width and height set) and the width and height set by the parent container after the load of an image.
as long as you continue to analyze this reason, you should be able to find a solution.


is the size of that.thumbnailBody.find ('. Thumbnail-cell >. Thumbnail-image') fixed? If it is fixed, you can first each that.thumbnailBody.find ('.thumbnail-cell > .thumbnail-image'), change the width and height of img first, and then fetch the width and height of the picture to src


when fetching data, and put it directly in .

Menu