Topic on Project:Support desk

[RESOLVED] Spoilers with lazy loading for heavy content

5
92.253.250.171 (talkcontribs)

Hi,

I'm not sure if I understand how browsers (Chrome) should work, but I've faced with the following issue. I have a page that's grown up to 50-60 embedded YouTube videos (due to historical reasons). Page load time now takes about 2-3 minutes and the page along with the tab it's hosted in becomes not responsible: the tab just gets frozen. I don't want to split the page into smaller smaller pages because I want the page keep its history and view count. The idea that came to my mind is hiding all embedded videos into spoilers.

Ok, I've implemented a pure HTML/CSS spoilers solution, but it requires at least label, and input/type=checkbox tags/attributes set to be allowed. HTMLTags does not work because it does not allow to nest tags and content, allowing its content to be plain text only. So, I found another way: the Spoilers extension. The latest version of the extension cannot work because I must use MediaWiki 1.23.6, so I had to downgrade the extension to 1.2 (thanks to Git tags). However, when I enclosed all embedded videos in the spoiler tag, it had no effect, and the browser seemed to load embedded videos even if no spoiler was open. Therefore, I'm stuck with not responsible frozen page.

What I'm looking for is: is there any way of making spoiler-ed content lazy and not load content unless the content becomes visible? I suspect I have wrong assumptions about browser DOM rendering., though, but any ideas are really welcome.

Thank you in advance!

Ciencia Al Poder (talkcontribs)

Using MediaWiki 1.23.6 is a security risk. Please upgrade.

About youtube videos, how are you including them? Maybe the problem is in the way how are they being embedded.

92.253.250.171 (talkcontribs)

Thanks for pointing out the security risk!

I'm currently using Extension:EmbedVideo 2.1.8 that provides <nowiki>{{#ev:youtube}}</nowiki>.

92.253.250.171 (talkcontribs)

Hm, it looks like this is how browsers work. Let's say if have a single div with style=display:none, and many iframes in it, the browser will still load all iframes. and the page gets not responsible and lagging for significant amount of time

Is there probably a workaround, or should I come to terms of splitting the page into smaller ones losing its history consistency?

92.253.250.171 (talkcontribs)

Unfortunately, display:none does not stop browser from rendering and fetching external resources .I finished up with a custom-patched version of the Spoilers extension, where I load the spoiler-ed content lazily using JavaScript. Now the page loads instantly without any lags.