Event when CSS is loaded?

[donum]

Hi!

congratulations aFarkas, great piece of code, very useful!

I'm using lazysizes as well as the includes plugin together with requirejs (and jQuery and Bootstrap).

It all works file, however when I try to load an amd module as well as corresponding css:

<div class="slider lazyload" data-include="amd:slider css:slider.css">
	<h2>Slider</h2>
</div>

My issue is that I don't have one of these:

• a javascript event I can listen to that tells me that the CSS file is loaded
• a dependency definition that tells lazysizes that the css file needs to be loaded first

In the documentation it states that in case of content (content.html), this one will always be included first and then js/css will be loaded/executed.

In most of my tests it's fine, however if I have a slider.css file that is large in size and it changes the width of a div, it's impossible for me to read out this width from amd:slider, because none of the available event listeners waits until the CSS is loaded.

In this case it still works (reading out the CSS width of the element via JS):

In this case it doesn't work anymore (reading out the CSS width of the element via JS):

Any chance this could be added? / Any idea what else to do?

Of course if my css file is just 5kb, all is fine. However I'd like to be in charge of the program flow and it shouldn't be based on coincidence.

Best Regards!
Daniel

[aFarkas]

Of course if my css file is just 5kb, all is fine.

There will be always a race condition.

To be honest the best way would be to use webpack for this and load only one JS file, which requires the slider.js and slider.css.

I will have to work on this.

[donum]

Thank you very much for the reply and your suggestion. I'm fairly new to this kind of approach, Webpack seems very complicated too me, or let's say there are so many dependencies, it makes me uncomfortable.

I checked curljs and liked it. This is how they seem to do it:
https://github.com/cujojs/curl/blob/master/src/curl/plugin/css.js#L304

[aFarkas]

You should really check webpack or parcel out! Also note you still can use it with lazyinclude. You can even use the amd identifier

window.lazySizesConfig.requireJs =(modules, cb) => {
	import(`dynamic-imports/${modules}`).then(cb);
};

However can you check the following script?: https://gist.github.com/aFarkas/a6b2fa29204c30d673a89d7f3cf48f14

I now only include everything, if the last CSS was successfully loaded. But I haven't even tested it my own.

[donum]

@aFarkas wow thank you!

It works like a charm for me in latest Chrome and Firefox.
In IE11 it doesn't work and in Edge it doesn't work reliable (so I guess it doesn't work)

I think the curljs guys did some stuff to also support IE, the first 400 lines of their document are related to that:
https://github.com/cujojs/curl/blob/master/src/curl/plugin/css.js#L15

Would love to see this option in lazyload. It's not needed always, but sometimes it is, so having the option to wait for the css would be a crucial feature.

[aFarkas]

test now

[donum]

Hi aFarkas,

I've tested it and I am pretty happy with the result. It's not 100% reliable in all circumstances, but as soon as the css file sizes get realistic (ok I mean 350KB is crazy!!), it is reliable across Chrome, Firefox, Edge and IE11.

CSS file size	Browser	Result
896KB (31 inline font face definitions)	Chrome	OK (Slider.lazytransform)
896KB (31 inline font face definitions)	Edge	50% reliably OK
896KB (31 inline font face definitions)	Firefox	not OK (css needs too long to render)
896KB (31 inline font face definitions)	IE 11	not OK (css needs too long to render)
896KB (31 inline font face definitions)	IE 10	OK (Slider.lazytransform; via BrowserStack)
896KB (31 inline font face definitions)	IE 9	OK (Slider.lazytransform; via BrowserStack)
694KB (24 inline font face definitions)	Chrome	OK (Slider.lazytransform)
694KB (24 inline font face definitions)	Edge	50% reliably OK
694KB (24 inline font face definitions)	Firefox	90% reliably OK (document.lazyloaded)
694KB (24 inline font face definitions)	IE 11	90% reliably OK (document.lazyloaded)
694KB (24 inline font face definitions)	IE 10	OK (Slider.lazytransform; via BrowserStack)
694KB (24 inline font face definitions)	IE 9	OK (Slider.lazytransform; via BrowserStack)
492KB (17 inline font face definitions)	Chrome	90% reliably OK (document.lazyloaded)
492KB (17 inline font face definitions)	Edge	90% reliably OK (document.lazyloaded)
492KB (17 inline font face definitions)	Firefox	90% reliably OK (document.lazyloaded)
492KB (17 inline font face definitions)	IE 11	90% reliably OK (document.lazyloaded)
492KB (17 inline font face definitions)	IE 10	OK (Slider.lazytransform; via BrowserStack)
492KB (17 inline font face definitions)	IE 9	OK (Slider.lazytransform; via BrowserStack)
347KB (12 inline font face definitions)	Chrome	OK (Slider.lazytransform)
347KB (12 inline font face definitions)	Edge	OK (Slider.lazytransform)
347KB (12 inline font face definitions)	Firefox	OK (Slider.lazytransform)
347KB (12 inline font face definitions)	IE 11	OK (Slider.lazytransform)
347KB (12 inline font face definitions)	IE 10	OK (Slider.lazytransform; via BrowserStack)
347KB (12 inline font face definitions)	IE 9	OK (Slider.lazytransform; via BrowserStack)
203KB (7 inline font face definitions)	Chrome	OK (Slider.lazytransform)
203KB (7 inline font face definitions)	Edge	OK (Slider.lazytransform)
203KB (7 inline font face definitions)	Firefox	OK (Slider.lazytransform)
203KB (7 inline font face definitions)	IE 11	OK (Slider.lazytransform)
203KB (7 inline font face definitions)	IE 10	OK (Slider.lazytransform; via BrowserStack)
203KB (7 inline font face definitions)	IE 9	OK (Slider.lazytransform; via BrowserStack)

In Chrome and Firefox I also tested it with connection throttling, and then I got 100% reliable results even with the 900KB CSS file. I tested older IE versions and they worked great via BrowserStack. Also here the connection was poor in comparison to the other test that happened on my local machine. So I guess that makes a big difference...
IE8 I couldn't test, because the latest jQuery version seems incompatible with it and I had to rush. But I guess it would also work. I can test later if you want.

I'd say this is good enough to add it as an option! What do you think?

[aFarkas]

Not good enough. I will need to write my own testcase to do the tests. Which means it will take some time to get this better. IE8 is not supported by lazysizes either.