How to lazyload svg image given in css?

Question

First I have Doubt about LazyLoading of images:

Whether LazyLoading of images means Loading image in dom at runtime or fetch the image from the source at runtime and loading ?

Secondly Coming to the problem

I got lot of example for lazyload images in tag. But for below scenario where the svg sprite images are used is there any example available.

I have html page with svg images used through css like below: HTML

<i class="svg-icon svg-icon-twitter"></i>

CSS

.svg-icon-twitter {
background: url("//localhost:3000/assets/sprite-footer.svg") 0 54.54545% no-repeat;
width: 24px;
height: 24px;
}
.svg-icon, .svg-logo {
  display: inline-block;
}

score 1 · Accepted Answer · answered Feb 05 '16 at 09:15

1

$("#some_id").addClass("svg-icon-twitter")

Only at the moment you add the class, the image in the css will start to load.

answered Feb 05 '16 at 09:15

Gavriel

18,880
12
68
105

i have a doubt the fetching of image will happen at loading of css or when the dom is loaded with the above class? – Praveenkumar Feb 08 '16 at 04:15
Open your javascript console's network tab and see it for yourself – Gavriel Feb 08 '16 at 07:44
Thanks for clarification. It is fetched when the dom is loaded. – Praveenkumar Feb 08 '16 at 08:39

score 0 · Answer 2 · edited May 23 '17 at 11:53

To do so, I will:

Separate the CSS that define sprite styles in a different file.
Load it asynchronously.

You can handle the asynchronous loading by adding the link element via JavaScript, once your page is loaded:

var link = document.createElement('link');
link.href = 'sprite.css';
link.rel = 'stylesheet';
link.type = 'text/css';
// Temporarily set media to something inapplicable to ensure it'll fetch without blocking render
link.media = 'only x';
// Set the media back when the stylesheet loads
link.onload = function() {link.media = 'all'}
document.getElementsByTagName('head')[0].appendChild(link);

source https://stackoverflow.com/a/32614409/1978945

You also can use a library like loadCSS.

How to lazyload svg image given in css?

2 Answers2