Angular 图片懒加载

Angular图片懒加载有很多写好的nglibrary可以用,我这里用的是ng-lazyload-image。可以在npm官网直接搜索。安装npminstallng-lazyload-image–save在module中导入:import{CommonModule}from’@angular/common’;import{LazyLoad…

大家好,又见面了,我是你们的朋友全栈君。

Angular 图片懒加载有很多写好的ng library可以用,我这里用的是ng-lazyload-image。可以在npm官网直接搜索。

安装

npm install ng-lazyload-image --save

在module中导入:

import { CommonModule } from '@angular/common';
import { LazyLoadImageModule } from 'ng-lazyload-image';

@NgModule({
  imports: [
    CommonModule,
    LazyLoadImageModule,
    ...
    ],
    ...

在component中初始化默认图片和懒加载图片

export class MyActivityComponent implements OnInit, OnDestroy { 
   

  constructor(
    private cService: ConstService
  ) {

  }

  // 懒加载默认图片url
  defaultImage = this.cService.getDefaultImage();
  // 
  cover = "https://hd.unsplash.com/photo-1431400445088-1750c997c6b5"

}

template中通过属性型指令使用:

...
<img [defaultImage]="defaultImage" [lazyLoad]="cover" />
...

更多用法,请参考官方示例

原文地址:https://blog.partager.top/2018/06/04/ng-lazyload-image/

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/127323.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • java中Collections.sort排序详解[通俗易懂]

    java中Collections.sort排序详解[通俗易懂]Comparator是个接口,可重写compare()及equals()这两个方法,用于比价功能;如果是null的话,就是使用元素的默认顺序,如a,b,c,d,e,f,g,就是a,b,c,d,e,f,g这样,当然数字也是这样的。compare(a,b)方法:根据第一个参数小于、等于或大于第二个参数分别返回负整数、零或正整数。equals(obj)方法:仅当指定的对象也是一个Compara

    2022年7月12日
    18
  • ldd 命令介绍_ldr指令是什么意思

    ldd 命令介绍_ldr指令是什么意思1.在制作自己的发行版时经常需要判断某条命令需要哪些共享库文件的支持,以确保指定的命令在独立的系统内可以可靠的运行;在Linux环境下通过ldd命令即可实现,在终端下执行:ldd/bin/ls//ldd命令通常使用”-v”或”–verbose”选项来显示所依赖的动态连接库的尽可能的详细信息。即可得到/bin/ls命令的相关共享库文件列表:libtermcap.so.2=>/lib/lib

    2022年5月3日
    65
  • 关于新人的培养与程序的测试

    关于新人的培养与程序的测试

    2021年7月26日
    51
  • shell中的if判断语句怎么写_shell脚本中if用法

    shell中的if判断语句怎么写_shell脚本中if用法if条件判断与if真假判断目录:1.正确写法2.错误写法3.总结一、正确写法在编写shell脚本时,为简化代码的行号及结构的简约型,通常将命令执行结果和判断通过一条语句进行编写(在C语言编写程序时,经常遇到此种写法),如:方法1:单一命令条件判断[root@centos7~]#touchtest.shifuseraddroot&am…

    2022年8月18日
    3
  • Java经典代码-冒泡排序[通俗易懂]

    Java经典代码-冒泡排序[通俗易懂]/** *@authorManScript * */publicclassMaopao{staticint[]scores={5,10,5,2,9,3,8};publicstaticvoidmain(String[]args){for(inti=0;ifor(intj=0;jif(scores[j]>scores[j+1]){

    2022年7月7日
    22
  • 卸载MySQL Connector NET无法卸载

    卸载MySQL Connector NET无法卸载卸载MySQLConnectorNET无法卸载最近安装了MYSQL数据库,安装完发现安装在了系统C盘,对于文件整理控加一丢丢强迫症的我来说,太介意了,不能忍。这里是解决办法:安装MYSQL自定义路径方法于是,开始卸载MYSQL,结果,ConnectorNET始终卸载不掉。网上看到了很多方法,删文件删注册表都无济于事,丝毫没有成功。终于,在google里找到可行的解决方法。原文网址:Cannotuninstall/repair/ChangeMySQL-Connector-net?Iss

    2022年7月15日
    25

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号