阻止渲染Fabric-js画布，直到完全填充为止

Question

In FabricJS canvas.loadFromJSON() seems to run some sort of renderAll function even if not specified? As I'm both loading images from JSON and some from another function, I would like the canvas to stay empty until everything is loaded and then render everything simultaneously.

I have created a short fiddle with a simplified version: https://jsfiddle.net/Xikura/cas6j7b3/168/

The fiddle toggles one of the layers then redraws the canvas, especially if you disable caching you can see that the props shows up on it's own, then the rest of the images a bit later. Quite minor one might say, but when there are between 10 and 30 images with various blend-settings, the loading could take some time until common images starts to get cached, moving around on the early visible props isn't doing my solution much good...

I see the documentation of loadFromJSON adds the renderAll() in it's callback, I trigger my own preload images in that same callback instead, to be able to add the other images.

if (!jsonCanvas) {
  // First load
  preload(images);
} else {
  // Loading from saved JSON
  canvas.loadFromJSON(jsonCanvas, function () {
    preload(images);
  });
}

Right now I can't seem to grasp why loadFromJSON seem to trigger some sort of render so the props are displayed first? Does FabricJS have any functionality I could use to prevent a render until I trigger it myself with renderAll() ?

I found the FabricJS-setting which one would think would solve this: renderOnAddRemove which I set to false, it did fix some other render-difficulties I had earlier, but had no effect on the loadFromJSON-part.

Answer 1

So I have been working the whole day on this, but after completing my question I decided to give it a rest and move on to other problems. By accident while trying to optimize the performance of my application I stumbeled upon this Improving FabricJS speed -site, which both answers my question and solves my problem.

By switching out loadFromJSON with fabric.util.enlivenObjects I'm able to trigger my own callback and not the (undocumented?) canvas.renderAll() which loadFromJSON calls.

  if (!jsonCanvas) {
    // First load
    preload(images);
  } else {
    // Loading from saved JSON
    fabric.util.enlivenObjects(jsonCanvas.objects, (objs) => {
      objs.forEach((item) => {
        canvas.add(item);
      });
      preload(images);
    })
  }

I updated my fiddle to include this fix.