rc4로 업데이트한 후 내 앱에 동일한 문제가 있습니다.

나는 RC 4에서 비슷한 문제에 직면하고 있는데 RC 3에서는 잘 작동했습니다.

내 쪽에서도 같은 문제

"ion-img"대신 "img"를 사용해보십시오. 나를 위해 일했다.

"ion-img"는 rc4에서도 작동을 멈췄습니다(가상 스크롤 없이도). "img"로 바꾸면 더 긴 목록에서 일부 성능 문제가 발생할 수 있습니까?

@sajTemler 예 작동하지만 ion-img와 함께 제공되는 지연 로딩과 같은 성능 이점을 잃습니다.

ng2 지연 로더를 계속 사용할 수 있습니다. 2개 이상이 있습니다. 나는 이것을 사용하고 있습니다 https://github.com/tjoskar/ng2-lazyload-image

차오 여러분,
ion-img는 태그가 보이는 콘텐츠에 있는 경우에만 제대로 작동합니다. 모든 목록, 세그먼트 등 .... 작동하지 않습니다.
내 임시 수정 사항:

1. node_modules/ ionic-angular/component/img/img.js 열기

2. 다음을 사용하여 ngAferContentInit 기능을 변경하십시오.

   Img.prototype.ngAfterContentInit = 함수() {
   var _this = 이것;
   this._img = this._elementRef.nativeElement.firstChild;

   if(!this._img.hasAttribute("src")){
   
   
       this._img.src=this._elementRef.nativeElement.getAttribute("src");
   
   }
   
   this._unreg = this._platform.addEventListener(this._img, 'load', function () {
       _this._hasLoaded = true;
       _this.update();
   }, { passive: true });
   

   };

Ionic 팀의 빠른 수정을 바랍니다. :)

여러분 안녕하세요! Ionic을 사용해 주셔서 감사합니다! 누군가 이 문제를 재현하는 데 사용할 수 있는 리포지토리를 게시할 수 있습니까?

@jgw96 샘플을 이메일로 보냈습니다

여전히 문제가 있습니까? "ion-img"가 내 앱에서 예상대로 작동하지 않지만 잠시 동안 설명을 찾을 수 없습니다

여기도 마찬가지입니다. 해결되었나요?

@naveedahmed1 여기에 샘플을 게시할 수 있습니까? 나는 우리가 같은 문제에 대해 이야기하고 있는지 확실하지 않습니다.

non-virtualScroll 그리드에서도 이 문제가 발생했습니다. plunker 에서 문제를 재현했습니다. 유한한(non-virtualScroll) 목록에서 제대로 작동하는 것 같습니다. ion-infinite-scroll을 목록에 추가 할 때마다 ion-images는 로딩 및 언로딩 문제를 보여줍니다.

따라서 '일반' 목록이 제대로 작동하는 것 같습니다. virtualScroll 또는 InfinityScroll이 있는 목록에 문제가 있는 것 같습니다.

RC5 - 동일한 문제

분명히 ion-img는 virtualScroll과 함께 사용해야 합니다.
https://github.com/driftyco/ionic/commit/a5bbbd55cbd0e256614b6a1062aabbab4b1f21bd

나는 @pavimus 와 정확히 같은 행동을합니다.

가상 스크롤 버퍼 후에 이미지가 나타나지 않고 CSS 클래스가 "img-unloaded"입니다(아래 스크린샷 참조).

이온 2 파이널과 함께. 이 문제에 대해 의사 소통할 수 있습니까?

최신 ionic에도이 버그가 있습니다.

스크롤 가능한 이미지 그리드(가상 스크롤이 없는 이온 그리드)에서 작동하기 위해 이것이 정말로 필요했기 때문에 프로젝트의 <project_root>/node_modules/ionic-angular/components/img/img.js 파일을 일시적으로 이 요지 로 대체했습니다.

주변을 파헤친 후 ion-img의 _top_ 및 _bottom_이 컨테이너의 절대 상단에 상대적이지 않아 잘못된 이미지가 로드/언로드되는 것으로 나타났습니다. 해결 방법은 요지의 231 행과 242 행을 참조하십시오.

우리는 또한 ion-img 확장을 시도했지만 많은 성공을 거두지 못했습니다. 그리고 Ionic dist 파일의 (임시) 사용자 정의 버전을 구축하고 이를 로컬 종속성으로 사용하는 것도 생각보다 복잡한 것으로 보입니다. 따라서 Ionic 팀이 이 작업을 수행하는 동안 이 해결 방법을 사용할 것입니다.

@sajTemler 해당 플러그인으로 스크롤이 멈춘 경우에만 이미지를 로드할 수 있습니까?

이 버그 및 기타 몇 가지(크롬/안드로이드에서 응답하지 않는 이미지 및 5x5만, 스크롤하기 전에 처음 시작할 때 이미지가 로드되지 않음..)는 지연 로드된 이미지가 있는 기사 표시에 크게 의존하는 프로덕션 앱을 중단했습니다.
그러한 변경 사항에 대한 문서를 얻지 못한 것이 좋습니다. 이것은 새로운 소식이 아닙니다.

@ventr1x 이 치명적인 버그가 12월 16일부터 아직 열려 있기 때문에 개발자들은 무엇을 하고 있는지 궁금합니다.

그것은 단지 깨져 있습니다(실제로 작동한 적이 없으며 베타에서는 어떤 문서에서도 언급되지 않았습니다).

나는 ng2-lazyload-image로 전환하고 rc6과 같이 작동하도록 했습니다(일부는 문서화되지 않은 동일한 작업을 거치지 않을 수 있습니다.):

요소

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({
  templateUrl: 'image-modal.html'
})
export class ImageModal {
  @ViewChild(Content) content: Content;

  constructor() {
  }

}

보다
<img [src]="img" [lazyLoad]="img" [scrollObservable]="content.ionScroll" />

@ventr1x 사용자가 이 플러그인으로 스크롤을 멈췄을 때만 이미지를 로드할 수 있나요?

@jgw96 상태 업데이트가 있습니까?

여기서도 같은 문제..
ion-img 를 segment $ 안에 넣으면 로드되지 않습니다.
http://plnkr.co/edit/Zb2EQQVCFgdyZ1CRfPsW?p=preview

https://github.com/shprink/ionic-withwebworker-vs-withoutwebworker 에서 Ionic 3.1.1로 쉽게 재현할 수 있습니다.

이것은 문제와 관련이 없지만 @shprink 웹 작업자 에서 완전한 이온 앱을 실행할 방법을 찾았습니까?

아직 @naveedahmed1 과 같은 것을 시도하지 않았습니다.

알겠습니다. 공유한 링크의 URL에 webworker가 있으므로 시도해 보셨을 거라 생각합니다. 방금 서비스 워커를 사용하고 있는지 확인했습니다. 그러나 불행히도 서비스 작업자는 장치에서 지원되지 않지만 웹 작업자는 장치에서도 작동합니다.

가상 스크롤 내의 ion-img 는 웹 작업자에서 img 를 로드해야 하므로 제목에 있습니다.

ion-img 를 img 로 바꿨고 가상 스크롤 내에서 ion-img 대신 img 를 사용하여 제대로 작동합니다.

문서에 따르면 성능상의 이유로 ion-img 를 사용해야 합니다( https://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/ 참조).

따라서 $# ion-img img 를 사용하는 것은 영구적인 해결책이 될 수 없으며 이 오랜 버그가 곧 수정되기를 바랍니다.

@manucorporat 아직 이 문제에 진전이 없습니까?

+1

나는 또한이 문제가 있었다. 버그는 ion-img에서 img::top 및 img::bottom 의 계산입니다. 이것은 스크롤하는 동안 ion-img $에 대해 $ Content::updateImgs 플래그 canRequest 및 canRender 를 설정하는 데 사용됩니다.
내 첫 번째 해결 방법은 가상 목록에 대해 ion-img 를 확장하는 것이었습니다.

import {Component, ElementRef, Renderer, Optional} from "@angular/core";
import {Img, Platform, DomController, Content} from "ionic-angular";

@Component({
  selector: 'virtual-ion-img',
  template: '<img>'
})
export class VirtualIonImg extends Img {
  constructor(private __elementRef: ElementRef,
              __renderer: Renderer,
              __plt: Platform,
              @Optional() private __content: Content,
              __dom: DomController) {
    super(__elementRef, __renderer, __plt, __content, __dom);
  }

  get top(){
    this._rect = (<HTMLElement>this.__elementRef.nativeElement).getBoundingClientRect();
    return this._rect.top + this.__content.scrollTop - this.__content._cTop;
  }
  get bottom(){
    this._rect = (<HTMLElement>this.__elementRef.nativeElement).getBoundingClientRect();
    return this._rect.bottom + this.__content.scrollTop - this.__content._cTop;
  }
}

또 다른 옵션은 페이지에서 이 함수를 재정의하여 Content::imgsUpdate 의 계산을 수정하는 것입니다.

import {updateImgs} from "ionic-angular/components/content/content";
import {Component, ViewChild} from "@angular/core";
import {Content} from "ionic-angular";

@Component({
  templateUrl: 'virtual-list.html',
})
export class VirtualListPage {
  @ViewChild(Content) _content: Content;
  ngAfterViewInit(){
    if(this._content) {
      this._content.imgsUpdate = () => {
        if (this._content._scroll.initialized && this._content._imgs.length && this._content.isImgsUpdatable()) {
          // reset cached bounds
          this._content._imgs.forEach((img:Img)=>img._rect = null);
          // use global position to calculate if an img is in the viewable area
          updateImgs(this._content._imgs, this._content._cTop * -1, this._content.contentHeight, this._content.directionY, 1400, 400);
        }
      };
    }
  }
}

DavidWiesner 답변 감사합니다
나는 이온 및 각도가 처음입니다 (이온 테스트 대 실제로 네이티브 반응 테스트)

어떤 파일에서 이것을 지나쳐야 합니까? app.components.ts에서?

@DavidWiesner , 솔루션에 감사드립니다. 예를 들어 주시겠습니까? 나는 updateImgs() 함수에 붙어있다

@alainib

첫 번째 해결 방법을 위해

src/app/app.module.ts에 등록해야 하는 것보다 src/components/virtual-ion-img.ts와 같은 새 파일을 생성해야 합니다.

import {VirtualIonImg} from "../components/virtual-ion-img";
...
@NgModule({
    declarations: [
        //... all other pages and components,
        VirtualIonImg
    ],
//... all other stuff e.g.: imports, providers
    entryComponents: [
        //... other pages and components,
        VirtualIonImg
    ]
})

http://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/#images -within-virtual에 설명된 대로 <ion-img> 대신 <virtual-ion-img [src]="url"></virtual-ion-img> 태그를 사용할 수 있습니다. -스크롤

두 번째 해결 방법을 위해

내부에 가상 스크롤이 있는 typescript 페이지 파일을 편집하고 가져오기, ViewChild 항목 및 ngAfterViewInit 메서드를 추가하기만 하면 됩니다.

@kabus202 댓글을 수정하고 누락된 import 문을 추가했습니다. updateImgs 함수는 ionic angular 콘텐츠 패키지에 정의되어 있으며 가져와야 합니다.

@DavidWiesner 첫 번째 해결 방법이 더 잘 작동하지만 여전히 로드되지 않는 이미지 대신 오래된 이미지가 표시됩니다.

@DavidWiesner : 정말 감사합니다! 귀하의 첫 번째 해결 방법은 저에게 완벽하게 작동하는 것 같습니다(제가 미친 것이 아니라 VirtualScroll이 실제로 고장났다는 것을 확신시키기 위해 작성한 매우 간단한 예에서). 이제 실제 앱에서 시도해 보겠습니다.

실제 Ionic _Img_ 구성 요소를 수정하기 위해 pull 요청을 할 수 있습니까?

@DavidWiesner 설명 감사합니다.
나는 여전히 문제가 있습니다 (저는 처음이고 동시에 react/ionic/nativscript를 시도하고 있습니다)

이것이 제가하는 것입니다 :

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import {VirtualIonImg} from "../components/virtual-ion-img";


@NgModule({
  declarations: [
    MyApp,      AboutPage,      ContactPage,        HomePage,       TabsPage
    VirtualIonImg
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,  AboutPage,      ContactPage,    HomePage,TabsPage
    VirtualIonImg
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

가상 이온 img.ts

import {Component, ElementRef, Renderer, Optional} from "@angular/core";
import {Img, Platform, DomController, Content} from "ionic-angular";

@Component({
  selector: 'virtual-ion-img',
  template: '<img>'
})
export class VirtualIonImg extends Img {
  constructor(private __elementRef: ElementRef,
              __renderer: Renderer,
              __plt: Platform,
              @Optional() private __content: Content,
              __dom: DomController) {
    super(__elementRef, __renderer, __plt, __content, __dom);
  }

  get top(){
    this._rect = (<HTMLElement>this.__elementRef.nativeElement).getBoundingClientRect();
    return this._rect.top + this.__content.scrollTop - this.__content._cTop;
  }
  get bottom(){
    this._rect = (<HTMLElement>this.__elementRef.nativeElement).getBoundingClientRect();
    return this._rect.bottom + this.__content.scrollTop - this.__content._cTop;
  }
}

내 견해

<ion-content padding>
  <h2>Ionic List items</h2>
    <ion-list [virtualScroll]="items">
        <ion-item *virtualItem="let item">
            {{ item.i }}
            <virtual-ion-img [src]="item.src"
                 alt="item.image"  height="200" width="300" >
            </virtual-ion-img>
        </ion-item>
    </ion-list>

  FIN
</ion-content>

나는이 오류가 있습니다 :

[WARN] Error occurred during command execution from a CLI plugin (@ionic/cli-plugin-cordova). Your plugins may be out of
       date.
Error: Template parse errors:
Can't bind to 'src' since it isn't a known property of 'virtual-ion-img'.
1. If 'virtual-ion-img' is an Angular component and it has 'src' input, then verify that it is part of this module.
2. If 'virtual-ion-img' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this componen
t to suppress this message.
 ("
        {{ item.i }}

        <virtual-ion-img [ERROR ->][src]="item.src"
             alt="item.image"  height="200" width="300" >
                </virtual-ion-img>
"): HomePage<strong i="19">@16</strong>:25

내가 무엇을 놓치고 있습니까?

@alainib src="item.src [src]="item.src" 를 사용해야 할 수도 있습니다.

카버스202 . 도와 주셔서 감사합니다. 내가 얻는 오류는 [src]입니다. 둘 다 시도했지만 잘못된 html 코드를 붙여 넣었습니다.)

'rc'를 사용하면이 오류가 발생합니다.

typescript: ..._amap/react-native-compare-ionic2-master/ionic/src/components/virtual-ion-img.ts, line: 14
Supplied parameters do not match any signature of call target.

            __dom: DomController) {
  super(__elementRef, __renderer, __plt, __content, __dom);

ngc failed: Failed to transpile TypeScript

@alainib 어떤 버전의 ionic을 사용하십니까? 3.2에서 Img 의 생성자가 변경되었습니다. Ionic 3.2 이전에는 생성자에 다른 매개변수로 NgZone을 추가해야 했습니다.

VirtualIonImg 이전 Ionic 3.2

import {Component, ElementRef, Renderer, Optional, NgZone} from "@angular/core";
import {Img, Platform, DomController, Content} from "ionic-angular";

@Component({
  selector: 'virtual-ion-img',
  template: '<img>'
})
export class VirtualIonImg extends Img {
  constructor(private __elementRef: ElementRef,
              __renderer: Renderer,
              __plt: Platform, 
              __zone: NgZone,
              @Optional() private __content: Content,
              __dom: DomController) {
    super(__elementRef, __renderer, __plt, __zone, __content, __dom);
  }

  get top(){
    this._rect = (<HTMLElement>this.__elementRef.nativeElement).getBoundingClientRect();
    return this._rect.top + this.__content.scrollTop - this.__content._cTop;
  }
  get bottom(){
    this._rect = (<HTMLElement>this.__elementRef.nativeElement).getBoundingClientRect();
    return this._rect.bottom + this.__content.scrollTop - this.__content._cTop;
  }
}

6개월이 지났는데 왜 안 고쳐졌지?

@WangRongda 이 문제를 해결하기 위해 승인되어야 하는 PR을 제출하셨습니까?

@janpio 마법처럼 지금은 정상적으로 표시됩니다. ion-img가 정상적으로 표시되지 않아 며칠 고생했습니다.죄송합니다.

원격 이미지가 있는 ~200개 항목이 있는 목록에서 이미지가 로드되지 않거나 스크램블됩니다(이전 항목의 이미지가 현재 항목에 있음). 여전히 문제가 있습니다. 이 문제를 해결하는 방법에 대한 아이디어가 있습니까? virtual-ion-img로 솔루션을 시도했지만 작동하지 않았습니다.

@dspachos 는 ionic 팀이 가상 스크롤 버그를 수정하는 것이 현재 우선 순위가 아니라 무한 스크롤을 대신 사용한다고 언급한 것을 이해합니다.

@JustasKuizinas 그러나 infinite-scroll 는 해결책이 아닙니다. 결국 모든 항목은 DOM에 있습니다. 그래서 특히 iOS에서 많은 메모리 문제가 있습니다.

ionic1.x에서도 비슷한 문제가 있었습니다. 나는 그들 모두가 ionic2 또는 3에 고정되어 있다고 생각했습니다. 불행히도 해결책이 없습니다.

@vahidvdn 솔루션은 아니지만 ionic 팀 자체가 가상 스크롤이 수정될 때까지 지금 당장은 최선의 선택이라고 말했습니다. :)

@JustasKuizinas 이 문제를 해결하기를 바랍니다.

그러나 vs-repeat (angularjs 및 angular 모두에 대해)라는 좋은 라이브러리가 있습니다. angularjs를 테스트했습니다. 정말 굉장하지만 iOS에서 스크롤하는 동안 많은 지연이 있습니다.

ionic 팀의 우선 순위가 무엇인지 모르겠지만 virtualScroll은 실제 앱에서 사용하는 가장 중요한 구성 요소 중 하나입니다.

@vahidvdn 전적으로 동의합니다. 현재 앱은 Ionic을 사용하여 완성하지만 다음 앱에서는 다른 프레임워크(React Native 또는 Native 스크립트)를 사용하기로 결정했습니다. Ionic 팀은 훌륭한 일을 하고 있지만 프레임워크에 성능 문제가 있습니다. 현재 앱에서 이미지가 포함된 최대 50개 항목의 정적 목록(가상 스크롤 버그로 인해)으로 끝났고 뒤로 버튼을 누르면 지연이 발생합니다(기본 동작인 popView를 사용합니다). 내 목록에 15-20개의 항목이 있는 경우와 같이 이 지연은 존재하지 않습니다.
더욱이 iOS에서는 기기가 배터리 절약 모드에 있을 때(그리고 CPU가 아마도 속도를 늦추고 있을 때) 성능이 훨씬 더 나빠져 거의 사용할 수 없습니다.

@dspachos 몇 달 전에도 오 가상 스크롤이라고 생각하여 매력처럼 작동하도록 하는 것이 최우선이어야 하므로 네이티브 스크립트 대신 ionic을 선택했지만 지금은 여전히 ​​손상되고 지연 없는 성능을 얻을 수 없다는 소식을 듣게 되어 슬픕니다. 방대한 데이터 목록.

저도 같은 문제가 있었지만 내 목록에 150개 미만의 항목이 있다는 것을 알고 있습니다. ion-img img 를 사용하려고 했고 성능 손실 없이 잘 작동합니다. ion-img 로 해결하는 데 시간을 잃었지만 실제로 모든 목록에 이 리소스가 필요한 것은 아닙니다.

@diegomachado1 이미지가 올바른 위치에 있습니까? 네트워크 연결 속도를 낮추고 다시 테스트하십시오. 일부 이미지가 로드되지 않으면 이전 이미지가 제자리에 와서 서로 충돌합니다.

2017-08-16 및 ionic 3.6 및 문제가 여전히 존재합니다.
제 경우에는 두 번째 수정 사항(상단에 게시됨)을 적용하고 작동합니다.

@decpio 정확히 무엇을 했는지 알려주시겠습니까?

확인,

깨진 페이지에 다음을 추가했습니다.
'@angular/core'에서 { Component, ViewChild } 가져오기;
'ionic-angular/components/content/content'에서 { updateImgs } 가져오기;
'ionic-angular/components/img/img-interface'에서 { Img } 가져오기;
'ionic-angular'에서 { 콘텐츠 } 가져오기;

/* 2017-08-16 - add this to class body
    start FIX#9660 ion-img doesn't correctly work with virtualScroll
    https://github.com/ionic-team/ionic/issues/9660#issuecomment-304840427
*/
@ViewChild(Content) _content: Content;
ngAfterViewInit() {
    if (this._content) {
        this._content.imgsUpdate = () => {
            if (this._content._scroll.initialized && this._content._imgs.length && this._content.isImgsUpdatable()) {
                // reset cached bounds
                this._content._imgs.forEach((img: Img) => (<any>img)._rect = null);
                // use global position to calculate if an img is in the viewable area
                updateImgs(this._content._imgs, this._content._cTop * -1, this._content.contentHeight, this._content.directionY, 1400, 400);
            }
        };
    }
}
/*
end FIX#9660
*/

그게 다야 - 문제가 사라집니다.
내 깨진 페이지:

<ion-content padding> <ion-grid [virtualScroll]="__items" [bufferRatio]="2" approxItemHeight="80px" approxItemWidth="100%" [virtualTrackBy]="ItemComparer"> <div *virtualItem="let item"> <ion-row align-items-center justify-content-center> <ion-col col-auto> <ion-item> <ion-thumbnail item-start> <ion-img [src]="'my-personalized-url?item='+item?.item"></ion-img> </ion-thumbnail> </ion-item> </ion-col> </ion-row> </ion-grid>

@DavidWiesner 감사합니다! 저는 Ionic-Angular 3.6.0(이 글을 쓰는 시점에서 최신 버전)을 사용하고 있으며 예상대로 작동합니다.

2번도 아주 잘쓰고있습니다. 하지만 너비와 높이 문제 때문에 사용하고 싶지 않았습니다. 또한 이미지가 로드되지 않은 경우 맨 아래 항목이 위 항목과 겹치는 몇 가지 문제가 발생했습니다. 그러나 아래로 스크롤하면 겹치는 문제가 사라집니다. 뷰포트에서 사라진 이전 항목이 겹치기 시작했습니다. 그리고 해당 항목이 뷰포트에 있고 이미지가 다시 로드되면 해당 배치에서 겹치는 문제가 사라집니다. 참고로.

@decpio 귀하의 솔루션은 저에게 완벽하게 작동합니다. 스크롤이 도달하지 않는 한 이미지는 "언로드" 상태로 유지되지만 로드되어야 할 때 로드되고 나타납니다. 매우 감사합니다!!!

한 가지 주의할 점은 페이지가 로드된 후 화면/창/프레임 크기가 변경되는 경우 init 범위 내에 있는 항목 수에 대해서만 레이스 로드가 계속 작동한다는 것입니다. 그러나 이것은 이미 원점 동작으로 인해 발생할 수 있습니다.

감사 합니다 @DavidWiesner & @decpio 두 번째 해결 방법은 Ionic 3.7.1에서 문제를 해결합니다.

따라서 해결 방법은 Ionic 3.8의 문제도 해결합니다. @manucorporat @adamdbradley를 사용하지 않는 이유
이것은 여전히 ​​모든 VS 사용에 정말 나쁜 것입니다 ...
@masimplo 확인해보실래요? https://github.com/ionic-team/ionic/pull/12917 에 대한 멋진 작업을 마친 후 VS에 뛰어들 수 있는 기술이 확실히 생겼습니다... 🙉

이 해결 방법은 iOS9에서 작동하지 않습니다. iOS10 및 iOS11에서는 괜찮습니다.

@HugoHeneault , @manucorporat , @adamdbradley : 이 해결 방법을 Ionic에 병합해야 한다는 데 전적으로 동의합니다(풀 리퀘스트를 수행하지만 해결 방법의 작성자가 아니기 때문에 직접 만드는 것이 불편함). 완벽하지는 않지만 패치가 없는 것보다 훨씬 낫습니다.

문제는 Ionic 팀이 virtualscroll이 작동하지 않는다는 것을 깨닫지 못한다는 것입니다. 3.8 변경 로그에 "가상 스크롤: 깜박임 문제 수정"이라는 항목이 있습니다. 전혀 작동하지 않는 기능에 대해 깜박이는 문제를 수정하는 이유는 무엇입니까?

@nicolus Ionic 팀이 virtualscroll/ion-img가 작동하지 않고 virtualscroll이 ion-refresh와 함께 작동하지 않는다는 것을 깨닫지 못한다는 데 동의합니다. @Apink_2020 @sun_sssssssss @_aaaaaaaaaaa

@HugoHeneault 저는 ion-img로 전혀 작업하지 않았습니다. 그랬어야 했는데 안 했어. 볼 수는 있지만 고장난 것에 대한 참조가 없습니다.

변경 로그의 @nicolus 항목은 가상 스크롤의 회귀 문제를 수정하기 위해 직접 제출한 PR에서 가져온 것입니다. 나는 당신의 좌절을 이해하지만, 그 PR은 기본 데이터 세트가 자주 업데이트될 때 사용할 수 없게 만드는 VS의 특정 문제를 수정했으며 모든 문제를 해결한 구성 요소의 완전한 재작성은 아니었습니다.

나도 VS가 훨씬 더 많은 관심을 필요로 한다는 데 동의하지만 유지 관리를 불가능하게 만드는 두 가지 주요 문제가 있습니다.

1. 가상 스크롤은 애초에 해결하기 어려운 문제입니다. 극소수의 프레임워크/라이브러리가 특정 제한을 두고 성공적으로 해결했습니다. Ionic VS는 모든 것, 가변 항목 크기, 다중 열, 항목당 머리글/바닥글, 이미지, 크기 조정 등을 해결하려고 합니다. 기존 구현은 구성 요소와 관련이 없는 많은 버그를 수정하는 다양한 리팩토링 주기를 거쳤습니다. 자세한 내용은 2번 항목 참조)
2. 이온 가상 스크롤은 많은 이온 구성 요소와 상호 작용합니다. 이미지를 위한 Ion-img, 더 많은 데이터를 로드하기 위한 무한 스크롤, 스크롤을 위한 콘텐츠 등. 또한 이온 요소 ion-item, ion-card 등과 사용자 정의 각도 요소를 모두 렌더링해야 합니다.

이 복잡성은 PR이 처리하기에는 너무 커서 가상 스크롤이 수행하는 작업(이는 이온 팀의 목표와 일치해야 함을 의미함), 수행 방법 및 다른 구성 요소와의 상호 작용에 대한 완전한 재설계가 필요합니다.

ionic v4로 이동하면 폴리머의 철 목록이 오늘날과 같이 변경될 것이라고 생각합니다. 현재 구현은 프로젝트에서 v4 릴리스 이후 ionic 프레임워크를 계속 사용할 사람들에게 실질적인 가치가 있습니다. 저 역시 가상 스크롤 없이는 실제 양의 데이터를 렌더링하는 데 있어 기본 애플리케이션과 경쟁할 수 없기 때문에 이 토끼 구멍에서 벗어나는 옵션을 찾고 있습니다.

@masimplo : 맞습니다. 가상 스크롤이 ion-img 이상의 용도로 사용된다는 사실을 잊었습니다(개인적으로 사용하는 용도이기 때문입니다).
이 특정 버그 수정을 비판하려는 것은 아닙니다. 이 문제와 관련하여 팀에서 더 많은 피드백을 받았으면 합니다.

이 문제에 대한 빠른 수정을 바랍니다. 소식이 있나요? 이거 팀에서 조사하나요?

나도 수정 바랍니다

@RafaelKr @fdambrosio v4가 출시되기 전에 구성 요소에 대한 수정을 기대하지 않는 것이 좋습니다. 불행하게도 ionic3로 작업하는 우리에게는 버그가 있는 구성 요소를 처리하거나 스스로 수정해야 합니다. 자유롭게 수정하고 PR을 작성하세요 ;)

+1

이 방법을 사용해보십시오
html <ion-img [src]="image.url" [alt]="image.alt">

여전히 수정을 기다리고 있습니다 ...

ionic v4를 기다려야 합니다.

@miqmago : 추가 정보는 여기를 읽어주세요:
https://blog.ionicframework.com/whats-the-issue-with-issues/

https://github.com/ionic-team/ionic/issues/9660#issuecomment -307314053 작동했습니다

이미지를 표시하는 것과 동일한 문제가 있었습니다.[virtualScroll] 내부에서 어떻게 수정합니까?

ionic v4를 기다려야 합니다.

Ionic 4에서 수정될 것이라고 믿는 것은 어리석은 일입니다.
새로운 버그가 있지만 팀은 Ionic 5, 6에 중점을 두고 각각의 새 버전에 대해 많은 버그를 남깁니다.
React 측면에서 각 버전에서 변경 사항을 깨뜨릴 위험이 있지만 적어도 우리는 무엇을 기대해야 하는지 알고 있습니다.
Ionic에 매우 실망했습니다... 버그를 너무 오래 끌고 사용자가 수정하도록 놔두는 것은 가치가 없습니다.

@mopi1402 과거에 ionic 팀에서 문제를 처리한 방식이 좋지 않다는 것을 알고 있습니다. 그러나 버전 관리 및 향후 문제를 처리하는 방법을 알고 싶다면 다음을 읽어야 합니다.
https://blog.ionicframework.com/whats-the-issue-with-issues/
https://blog.ionicframework.com/ionic-semantic-versioning-release-schedule-and-lts/

ionic 프레임워크는 오픈 소스이며 누구나 문제 해결을 도울 수 있다는 것을 잊지 마십시오. :)

@mopi1402 Angular 개발자라면 react-native 대신 Nativescript를 추천합니다.
여기에서 네이티브스크립트가 반응보다 나은 이유를 찾을 수 있습니다.

@mopi1402 에 동의합니다. 이것이 가장 많이 사용되는 기능 중 하나입니다.

아직 v4 베타에서 작동하지 않습니다.

Ionic 4에서 작동하지 않는 것은 좋지 않습니다.

Ionic은 오픈 소스 소프트웨어입니다. 빨리 수정하고 싶다면 패치를 만들고 PR을 제출하세요 👍

@HugoHeneault : 내 프로 구독을 통해 한 달에 29달러를 지불하는 오픈 소스 소프트웨어입니다(프레임워크 자체는 무료지만 비영리 조직이 아니라 구독료), 그래서 나는 무료로 그것을 스스로 고칠 필요가 없을 것으로 기대합니다.

수정하기 어려운 문제이고 ionic 4가 아직 베타 버전이며 우선 순위가 낮은 문제라는 것을 이해할 수 있습니다... 이 모든 것이 완벽하게 타당한 이유이지만 "OSS가 스스로 해결합니다 lol"은 그렇지 않습니다.

@nicolus 당신 말이 옳았고, 내가 지불한 서비스가 작동하지 않을 때도 불평했습니다. 그러나 우리는 Ionic 회사가 프리미엄 서비스로 돈을 벌고 있다고 해도 팀의 많은 개발자가 많은 일을 하고 있으며 누구나 지불하지 않고 사용할 수 있는 무료 도구를 위해 생계를 꾸려야 한다는 점을 명심해야 합니다.

저에게는 OSS가 작동하는 방식입니다. 서비스 비용을 지불할 의무가 없으며 한 푼도 주지 않고 멋진 앱을 만들 수 있지만 그들은 당신의 삶을 더 쉽게 만들어주는 서비스를 제공합니다. 나는 또한 많은 프로 구독에 대해 비용을 지불하고 있습니다. 그렇다고 며칠을 소비하지 않고 수정이 가능할 때 도움을 줄 수 없다는 의미는 아닙니다.

이 문제는 Ionic 3 문제로 자동 식별되었습니다. 최근에 Ionic 3를 자체 저장소로 옮겼습니다. 이 문제를 Ionic 3용 저장소로 옮기고 있습니다. 여기에서 이 문제를 추적하십시오.

제가 실수를 했고 이 문제가 여전히 Ionic 4와 관련이 있다면 Ionic Framework 팀에 알려주십시오!

아이오닉을 이용해 주셔서 감사합니다!

문제 이동: https://github.com/ionic-team/ionic-v3/issues/148