Open iconexperience opened 5 years ago
Another simple way to show SVGs before injection is to add another CSS rule like the following
img[onload].show-unstyled {
visibility: visible;
}
The selector has higher specificity than img[onload^="("]
, so the visibility from this rule will be applied if the class show-unstyled
is set to the <img>
element.
Currently all
<img>
elements that should be injected will be hidden until injection is finished. This is done to prevent "unstyled content flash" and it works quite well.However, in some cases it may be desirable to show the
<img>
elements before injection, for example if they already have the correct style (and are only injected to be styled later). In this case the SVG should be visible as soon as possible, which includes displaying the<img>
before injection.A simple way to make
<img>
elements visible is to add a leading space in theonload
attribute value like this:onload=" SVGInject(this)"
. In this case the CSS selector will not match these elements and the elements will not be hidden.Another way to show images is to add a custom class like
show-unstyled
that has a CSS rule like this applied:.show-unstyled { visibility: visible !important; }
We should consider adding a well defined way to suppress unstyled content flash for certain
<img>
elements. This can be done by defining a custom attribute likedata-show-unstyled
or a classshow-unstyled
. The selector for hiding<img>
elements then has to be changed toimg[onload^="SVGInject"]:not([data-show-unstyled])
orimg[onload^="SVGInject"]:not(.show-unstyled)
.