`cancel_on_exit` for `video` elements

Author: Edvinas01Created Jan 15, 2025Updated Jan 21, 2025
LabelsTYPE: Question

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?