Estou executando um projeto Ionic 2 existente (2.0.0-beta.11, usando Angular 2.0.0-rc.4). Instalado e configurado, mas continuo recebendo o seguinte erro (o erro ocorre no tempo de execução. Sem problemas durante a compilação)
Ran Npm:
$ npm install ng2-lazyload-image --save
Importado para meu componente:
import { LazyLoadImageDirective } from 'ng2-lazyload-image';
Definir diretivas:
directives: [ LazyLoadImageDirective ]
Defina variáveis e padrões:
export class PostComponent {
defaultImage: any = 'build/assets/preloader.gif';
offset = 100;
@Input() feedImage: string = 'build/assets/blank-default-feed-bg.png';
}
No meu modelo:
<img [src]="defaultImage" [lazyload]="feedImage" [offset]="offset" class="feed-image">
Talvez haja algo que estou esquecendo, mas não consigo ver o que é.
Oi,
Não consigo reproduzir o problema. Qual versão do ng2-lazyload-image você está usando? O seu projeto é de código aberto, para que eu possa dar uma olhada nele?
$ npm install -g ionic<strong i="8">@beta</strong>
$ ionic --version
2.0.0-beta.37
$ ionic start ionic-lazy-load-images --v2
$ cd ionic-lazy-load-images
$ npm install [email protected] --save
$ ionic serve
`app / pages / home / home.html:
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="home" #container>
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p style="height: 1000px;">
Take a look at the <code>app/</code> directory to add or change tabs,
update any existing page or create new pages.
</p>
<img
style="height: 1099px;"
[src]="defaultImage"
[lazyLoad]="image"
[offset]="offset"
[scrollTarget]="container._scroll._el">
</ion-content>
`app / pages / home / home.ts:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LazyLoadImageDirective } from 'ng2-lazyload-image';
@Component({
templateUrl: 'build/pages/home/home.html',
directives: [ LazyLoadImageDirective ]
})
export class HomePage {
defaultImage = 'https://www.placecage.com/1000/1000';
image = 'https://hd.unsplash.com/photo-1441765425173-8fd330fb4a02';
offset = 100;
constructor(private navCtrl: NavController) {
}
}
E funciona bem :)
NO ENTANTO, como o ionic está usando guias (por padrão) e adicionando display: none
no contêiner de rolagem, é quase impossível determinar se a imagem está inicialmente na janela de visualização ou não. Deve ser bom usar algo como um observador de interseção, mas só funciona no Chrome e se você tem como alvo o iOS, vai usar o Safari: /
Uma solução é, no entanto, verificar se a imagem está oculta (por exemplo: el.offsetParent === null
), mas quando a imagem ficar visível novamente, ng2-lazyload-image
não receberá nenhuma notificação e SE a imagem estiver na janela de visualização, o a imagem não aparecerá antes que o usuário comece a rolar. No entanto, você pode usar *ngIf
para isso:
<img
*ngIf="container._scroll._el.offsetParent !== null"
style="height: 1099px;"
[src]="defaultImage"
[lazyLoad]="image"
[offset]="offset"
[scrollTarget]="container._scroll._el">
Mas isso não parece nada bom: /
Então .. você pode ou não ser capaz de usar ng2-lazyload-image
em seu aplicativo iônica (dependendo do layout), mas você não deve ter quaisquer erros de execução.
Você cometeu um erro de digitação.
É [lazyLoad], não [lazyload]
Felicidades :)
Isso parece constrangedoramente simples.
Vou atualizar para o rc1 e testá-lo. Obrigado.
Na segunda-feira, 17 de outubro de 2016 às 13h37, Stan Faas [email protected] escreveu:
Você cometeu um erro de digitação.
É [lazyLoad], não [lazyload]Felicidades :)
-
Você está recebendo isto porque é o autor do tópico.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/tjoskar/ng2-lazyload-image/issues/37#issuecomment -254195387,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/APPh0par6NR7EA3DA1GbibncX8gCb2YRks5q02wTgaJpZM4J5EjU
.
@StanFaas , boa pegada!
Estou recebendo o mesmo erro, como posso resolver isso.
Comentários muito úteis
Você cometeu um erro de digitação.
É [lazyLoad], não [lazyload]
Felicidades :)