`cancel_on_exit` for `video` elements

[Edvinas01]

Is your support request related to a problem? Please describe.
I have a single page site (large HTML file with lots of content) which contains a lot of video elements that range from 1mb-10mb in size. When the user scrolls quickly past the page to the very bottom, the larger video take a while to load and are not canceled. Due to this, when the internet connection quality is not very good, the page lags.

To Reproduce

1. Create a page with 10+ large-ish video elements.
2. Install lazyload.
3. Initialize LazyLoad and pass in cancel_on_exit: true option.
4. Open network debugger/tab.
5. Quickly scroll down to the bottom of the page.
6. Notice that videos placed at the beginning of the page are still loading and are not canceled.

Expected behavior
The video elements get canceled and stop loading if the user scrolls past them during load.

LazyLoad version

• Version 19.1

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Firefox (Windows), Firefox Focus (iOS)

Additional context
It seems that cancelling only works for img elements per:
https://github.com/verlok/vanilla-lazyload/blob/master/src/cancelOnExit.js#L12

Is there some reason why its only enabled on img tags? Is there some workaround I could use to enable canceling for video elements?

[verlok]

Sorry, this it's not technically possible at the browser level. Cancelation works only for images.

[Edvinas01]

Sorry, this it's not technically possible at the browser level. Cancelation works only for images.

Is that true? I'm currently looking at MDN to workaround this and it seems like calling load() again should do the trick 🤔 I guess the src would need to be set to an empty string also.

Calling load() aborts all ongoing operations involving this media element, then begins the process of selecting and loading an appropriate media resource given the options specified in the or element and its src attribute or child element(s). This is described in more detail in the HTML video and audio page.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/load#usage_notes

...I can't seem to find more info on this, only in MDN, maybe I'm missing something 🙈

[verlok]

Wow, thank you for your finding, we should definitely try that.

Do you have time to verify that information? If that works, it should definitely be the case for an update of vanilla-lazyload!

[Edvinas01]

Wow, thank you for your finding, we should definitely try that.

Do you have time to verify that information? If that works, it should definitely be the case for an update of vanilla-lazyload!

I'll play around this week and will report back!

[Edvinas01]

Wow, thank you for your finding, we should definitely try that.

Do you have time to verify that information? If that works, it should definitely be the case for an update of vanilla-lazyload!

Alright, I've cooked up a sample here: https://jsbin.com/zayemoticu/1/edit?js,output:

• Basic lazy loading using IntersectionObserver to keep the sample simple
• Unloading of video elements by: calling pause(); clearing src; calling load()
• Tested on Firefox, it seems that requests are being canceled if I scroll past the elements quickly

[verlok]

Hello,
thank you for your test! I saw that in your code you replicated the lazyload functionality.
I wasn't able to see any video stopping the download though.

If you have time, I would do something much simpler:

• just one video, but very heavy to load
• a "Load" html button to load the video
• a "Stop loading" html button to stop loading the video
  Then try to stop loading the video by pressing "Stop loading".
  Optionally slow down your connection speed using Chrome Dev Tools -> Performance.

What do you think?

[Edvinas01]

Hello, thank you for your test! I saw that in your code you replicated the lazyload functionality. I wasn't able to see any video stopping the download though.

If you have time, I would do something much simpler:

* just one video, but very heavy to load

* a "Load" html button to load the video

* a "Stop loading" html button to stop loading the video
  Then try to stop loading the video by pressing "Stop loading".
  Optionally slow down your connection speed using Chrome Dev Tools -> Performance.

What do you think?

Sounds good, I'll try it out this week (maybe today if I have the time)!

Regarding the JSBin, try scrolling by clicking on the scroll-bar with the mouse rather than using the scroll-wheel, I noticed that this triggers unloads more reliably, at least on FF & Brave:

2025-01-21_13_30_02_brave.mp4

I saw that in your code you replicated the lazyload functionality.

After implementing this, I had a similar idea with the button, not sure why I went this route lol...

[Edvinas01]

Hello, thank you for your test! I saw that in your code you replicated the lazyload functionality. I wasn't able to see any video stopping the download though.

If you have time, I would do something much simpler:

* just one video, but very heavy to load

* a "Load" html button to load the video

* a "Stop loading" html button to stop loading the video
  Then try to stop loading the video by pressing "Stop loading".
  Optionally slow down your connection speed using Chrome Dev Tools -> Performance.

What do you think?

Seems that it behaves differently if the action is performed via button (no canceled message, the download just stops).

See: https://jsbin.com/sodemehawo/1/edit?js,output