angular实现图片预加载

作者:liuguobing   阅读 (5102)  |  收藏 (0)  |  点赞 (0)

摘要

图片往往是网页加载最慢的一个环节,使用预加载技术能大大提高用户观感


原文链接:angular实现图片预加载

图片往往是网页加载最慢的一个环节,使用预加载技术能大大提高用户观感。

预加载的原理很简单,img的src先设置成一个初始图片,然后js创建一个Image对象,浏览器会去主动下载这个对象的src,然后在将img的src改成这个src。Image有两个事件,一个是load,一个是error,我们接下来要利用这两个事件。

首先,我这里用的是angular指令,之所以选择指令,因为img的属性过多,使用component要一个个设置这些属性挺麻烦,先上代码:

@Directive({
  selector:"[preload]"
})
export class PreloadDirective implements OnInit{

  ngOnInit(): void {
    let ele = this.el.nativeElement;
    let src = this.dhSrc;
    if (src){
      if (src.startsWith("http://") || src.startsWith("https://")){
        src = src.substring(src.indexOf("/"));
        src = `${location.protocol}${src}`;
      }
    }else {
      src = DEFAULT_IMG;
    }
    let image = new Image();
    image.src = src;
    image.addEventListener("load",() => {
      Observable.interval(3000)
        .subscribe(() => {
          this.renderer.setElementAttribute(ele,"src",src);
        })
    });
    image.addEventListener("error",() => {
      this.renderer.setElementAttribute(ele,"src",DEFAULT_IMG);
    });
    this.renderer.setElementAttribute(ele,"src",DEFAULT_IMG);
  }

  constructor(private el: ElementRef, private renderer: Renderer) {
  }

  @Input("mySrc")
  dhSrc:string;


}

这里做到的不仅仅是预加载,还改变了src的protocol,我们往往有很多图来自外站,假如你的站点用了https,而外站图片用得是http,这样就可能有安全隐患。我加了一个interval是为了模拟环境看到效果,大家如果直接用我的代码请将这个删掉。

使用方式:

<img preload [mySrc]="图片地址" alt="alt" width="widht" class="classes" style="style" ...>


分类   angular2
字数   1336

博客标签    预加载图片   angular   指令  

评论