Support for lazy loading iframes

[intellix]

We've got a dynamically built site via CMS and our clients keep adding iframes containing megabytes of resources onto the homepage. It'd be awesome to be able to lazily load those too.

Tried it initially because both images and iframes have the [src] property but it just tried to load it as an image instead of just adding the property

[tjoskar]

I'm not sure this lib is a perfect fit for that use case but maybe it will work if you just create a loadImage, like:

import { LoadImageProps } from 'ng-lazyload-image';

export function loadImage({ imagePath }: LoadImageProps) {
  return [ imagePath ];
}

@NgModule({
    declarations: [ AppComponent ],
    imports: [
      BrowserModule,
      LazyLoadImageModule.forRoot({ loadImage })
    ],
    bootstrap: [ AppComponent ]
})
export class MyAppModule {}

But I guess you don't want to use that function for all images, but just for some iframes. I believe it is a good idea to be able to add hooks to specific images.

[intellix]

Also, same request for lazily loading <video> tags. Why wouldn't this lib be a perfect fit for that case? They're all elements with [src] tags that you only want to load when the element is visible.

I've now created a Directive for emitting visibility based on IntersectionObserver and can use it as needed but I don't know why this lib wouldn't just support that

[tjoskar]

Sorry for my late response.

Why wouldn't this lib be a perfect fit for that case? They're all elements with [src] tags that you only want to load when the element is visible.

The problem is that this lib lazyload the image by creating an Image class. But for iframe I guess we should just put the url to src when it is in the viewport.

I have the following questions:

1. Should we put the defaultImage to src before the iframe is in the viewport? I guess not?
2. Should we just put the lazyLoad path to src when the iframe is in the viewport without trying to load it first?
3. Should we accept other types of object as well? Like: <audio>, <embed>, <map>, <object, <param>, <track>, <video>? I guess so?

I guess one could solve this by using the following hook, is that :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';
import { AppComponent } from './app.component';

class LazyLoadImageHooks extends IntersectionObserverHooks {
  setup(attributes: Attributes) {
    if (attributes.element.tagName !== 'IFRAME') {
      return super.setup(attributes);
    }
  }

  loadImage(attributes: Attributes) {
    if (attributes.element.tagName === 'IFRAME') {
      return [attributes.imagePath];
    }
    return super.loadImage(attributes);
  }
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule.forRoot(LazyLoadImageHooks)],
  bootstrap: [AppComponent],
})
export class MyAppModule {}