Ads by Google

lazysizes unload

Unloads img.lazyload (including picture) elements if they consume a lot of memory and they are out of view. To improve memory consumption as also resize/orientationchange performance.


Simply add the lazysizes unload extension to your site.


  • lazySizesConfig.unloadClass (default: "lazyunload"): Elements with this class will be unloaded even if they only consume less memory/pixels than defined in unloadPixelThreshold.
  • lazySizesConfig.unloadedClass (default: "lazyunloaded"): If an element was unloaded it becomes the class lazyunloaded.
  • lazySizesConfig.unloadPixelThreshold (default: Number is dynamically calculated): If the amount of image pixels exceeds this threshold this image will be unloaded.
  • lazySizesConfig.autoUnload (default: true): Whether unloading should happen automatically with all lazyload images. If set to false, only elements with the class lazyunload will be unloaded.
  • lazySizesConfig.emptySrc (default: transparent data uri): The src to be used as unload image.
  • lazySizesConfig.unloadHidden (default: true): Whether hidden images (display: none;) also should be unloaded.

Note: In case you dynamically change the data-src/data-srcset of an already unloaded element, you have to remove the lazyunloaded class.


  • lazyafterunload: This event will be fired on the unloaded lazyload elements. This event can be used to extend the unload functionality. ```js //div ajax example which returns DOM string: document.addEventListener(‘lazybeforeunveil’, function (e) { var containerId =‘data-id’);

    //load ajax content with containerId //append content to });

//clean DOM nodes inside container that where previously loaded by ajax: //lazyafterunload gives possibility to take care of the cleanup in this case document.addEventListener(‘lazyafterunload’, function (e) { var container =;

while (container.firstElementChild) {
} }); ```