image-svg-dynamic-load.h2.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>internal priority of SVG's &lt;image&gt; element (dynamic insertion)</title>

</head>

<body>

<script>

  onload = function() {

    const kData = [

        { src: "../resources/square_25px_x_25px.png?1", fetchPriority: "low" },

        { src: "../resources/square_25px_x_25px.png?2", fetchPriority: "high" },

        { src: "../resources/square_25px_x_25px.png?3", fetchPriority: "auto" },

        { src: "../resources/square_25px_x_25px.png?4"},

];

    let numberOfLoads = 0;

    for (const data of kData) {

        const namespaceURI = "http://www.w3.org/2000/svg";

        const imgElement = document.createElementNS(namespaceURI, "image");

        if ("fetchPriority" in data) {

            imgElement.fetchPriority = data.fetchPriority;

        imgElement.addEventListener("load", () => {

          ++numberOfLoads;

          if (numberOfLoads == kData.length) {

            opener.postMessage("ChildLoaded");

        }, { once: "true"});

        // Use setAttribute as corresponding SVGImageElement/SVGURIReference

        // attributes are read-only.

        imgElement.setAttribute("width", "25");

        imgElement.setAttribute("height", "25");

        imgElement.setAttribute("href", data.src);

        // Per https://svgwg.org/svg2-draft/linking.html#processingURL

        // the URL is only processed "at the time the element is connected to a

        // document, or at the time when the attribute is set, whichever is

        // later" so it's necessary to insert imgElement into the document in

        // order to trigger ressource fetching.

        let svg = document.createElementNS(namespaceURI, "svg");

        svg.appendChild(imgElement);

        document.body.appendChild(svg);

</script>

</body>

</html>