It downloads svg sprite twice in chrome and three times in IE11. How can I fix it?

[goldenmaya]

Sometimes downloads three time in chrome. Also I see many loading errors.

[Epicycle23]

I noticed the same, for me it was the difference in the href value ./images/sprite.svg vs ./Images/sprite.svg vs Images/sprite.svg.
I got around that by adding the following code:

function normalizeUrl(url) {
    if (url) {
        url = url.toLowerCase();
        if (url.lastIndexOf("./", 0) === 0) {
            url = url.substr(2);
        }
    }
    return url;
}
href = normalizeUrl(href);

seems to work so far.

PS: Just noticed the hash part is used by getElementById so maybe its safer to only replace the base part,
base = normalizeUrl(url[0]);

Nevermind, use with caution, casing seems to matter, not for IIS though.

[Epicycle23]

I pretty much ended up refactoring the whole plugin:

• only the cache uses the normalized url/key now since casing may matter depending on the server so if the issue of loading/adding the svg mutliple times is related to the href format this may help
  Unrelated to this problem but maybe worth mentioning:
• processed elements get marked with a data attribute so they won't get updated every 100 ms
• instead of getElementsByTagName it uses querySelectorAll now and only searches for use elements without the data attribute (svg > use:not([data-svgxused]) - IE9+ is fine for me
• element processing can be called from anywhere which allows me to process elements that have been loaded via ajax, this prevents "flickering" of icons in IE10 at least as long as the svg has already been added/requested

[daporro]

feel like sharing that code somewhere so I don't have to do the same? :)

I pretty much ended up refactoring the whole plugin:

• only the cache uses the normalized url/key now since casing may matter depending on the server so if the issue of loading/adding the svg mutliple times is related to the href format this may help
  Unrelated to this problem but maybe worth mentioning:
• processed elements get marked with a data attribute so they won't get updated every 100 ms
• instead of getElementsByTagName it uses querySelectorAll now and only searches for use elements without the data attribute (svg > use:not([data-svgxused]) - IE9+ is fine for me
• element processing can be called from anywhere which allows me to process elements that have been loaded via ajax, this prevents "flickering" of icons in IE10 at least as long as the svg has already been added/requested

[Epicycle23]

feel like sharing that code somewhere so I don't have to do the same? :)

I pretty much ended up refactoring the whole plugin:

• only the cache uses the normalized url/key now since casing may matter depending on the server so if the issue of loading/adding the svg mutliple times is related to the href format this may help
  Unrelated to this problem but maybe worth mentioning:
• processed elements get marked with a data attribute so they won't get updated every 100 ms
• instead of getElementsByTagName it uses querySelectorAll now and only searches for use elements without the data attribute (svg > use:not([data-svgxused]) - IE9+ is fine for me
• element processing can be called from anywhere which allows me to process elements that have been loaded via ajax, this prevents "flickering" of icons in IE10 at least as long as the svg has already been added/requested

sure just keep in mind that it is more restrictive now regarding browser compatibility (querySelectorAll) but for us that's fine.

svgxuse.zip