iconfu/svg-inject

Implement a promise

advename opened this issue · 6 comments

advename commented

Since I'm already suggesting stuff, I would also implement a promise.

I.e.
DOMContentLoaded > SVGInject > init or function (but only on a resolved callback).

Because currently the issue with both inits is that the svg inject takes around 10ms to inject.

dasboe commented

If I understand you correctly you would like the SVGInject() method to return a Promise object which resolves when all injections of the passed in img elements are finished (even if some of the injections might fail).

I think this makes a lot of sense and we will definitely consider implementing this in a future release.

  • 👍1
advename commented

Yes, exactly, thanks a lot!

dasboe commented

implemented in 2ed841d

will be part of upcoming release version 1.2.0

advename commented

Amazing, could you then maybe add an example to the docs how it would be used for to run a script after all completed injects?

dasboe commented

Yes, we will add an example how this can be achieved to the docs.

In Version 1.2.0 there will be two possible ways how to run scripts after all SVGs have been injected:

(1) Use the options hook onAllFinish

<img src="image1.svg" class="injectable" />
<img src="image2.svg" class="injectable" />
<img src="image3.svg" class="injectable" />
SVGInject(document.querySelectorAll('img.injectable'), {
  onAllFinish: function() {
    // all three images have been injected
  }
});

(2) use the Promise object returned by SVGInject()

<img src="image1.svg" class="injectable" />
<img src="image2.svg" class="injectable" />
<img src="image3.svg" class="injectable" />
// SVGInject returns a Promise object which can be used to trigger if all injections are completed
SVGInject(document.querySelectorAll('img.injectable')).then(function() {
  // all three images have been injected
});

This method only works for browsers supporting the Promise object or any browser with a Promise polyfill

Both methods do not provide any parameters for the passed in function. This may be something which we may change later. It would be possible to provide an array of successfully injected SVGs as first parameter and an array of failed to inject img elements as second parameter but I'm not so sure if this is really needed.

@advename - could you maybe confirm if this all works for you. It's all up and running in the development branch.

iconfu commented

just released Version 1.2.0 which implements the use of a Promise object