Ionic-framework: RC4 ion-img неправильно работает с virtualScroll

Созданный на 16 дек. 2016  ·  90Комментарии  ·  Источник: ionic-team/ionic-framework

Ионная версия: (отметьте один знаком «x»)
[ ] 1.x
[х] 2.х

Я отправляю ... (отметьте один знаком "x")
[x] отчет об ошибке
[ ] запрос функции
[ ] запрос на поддержку => Пожалуйста, не отправляйте запросы на поддержку здесь, используйте один из этих каналов: https://forum.ionicframework.com/ или http://ionicworldwide.herokuapp.com/

Текущее поведение:
Когда вы используете virtualScroll и ion-img, после прокрутки вниз (когда буфер заканчивается) ion-img перестает загружать изображения

_034

Пожалуйста, посмотрите на инспектор кода:

2016-12-16 10-23-17

URL http://base247.lin2/thumbs/c6/files_56_222bf7a3335ce7c20553f0f374eb0266b871af41.jpg_mobileListImage_1412346660_3.jpg

правильно (для моей локальной машины) и изображение доступно.

Ожидаемое поведение:
ion-img должен загружать изображения

Действия по воспроизведению:

Связанный код:

<ion-content>
    <ion-refresher (ionRefresh)="dataService.refresh($event)">
    <ion-refresher-content
        pullingText="Потяните для обновления"
        refreshingText="Загрузка">
    </ion-refresher-content>
</ion-refresher>
    <ion-list [hidden]="(works|filterWorks:filter.price.mode:filter.price.from:filter.price.to:filter.price.currency_id:filter.location.mode:filter.added.mode:sort.orderBy:commonData).length==0" [virtualScroll]="works|filterWorks:filter.price.mode:filter.price.from:filter.price.to:filter.price.currency_id:filter.location.mode:filter.added.mode:sort.orderBy:commonData" approxItemHeight="80px" >
    <ion-item-sliding *virtualItem="let work">
        <button ion-item (click)="goWork(work)" [ngClass]="{'work-list-item-selected':selectedWorks.works[work.id]}">
            <ion-thumbnail item-left>
                                    <ion-img [src]="work.image|defaultImage"></ion-img>
                            </ion-thumbnail>
                        <h3>{{commonData.authors[work.author_id]?.title}}</h3>
            <h5>{{work.title}}</h5>
            <p class="work-list-price">{{work.price | price : work.price_currency_id : commonData.currencyExchangeRate : true}}</p>
            <p>{{work.year ? work.year+',':''}} {{work.techniques | techniques : commonData.techniques : commonData.mainLanguageId}}</p>
        </button>
        <ion-item-options side="left">
            <button ion-button icon-only color="primary" (click)="selectedWorks.toggle(work)">
                <ion-icon name="{{selectedWorks.works[work.id] ? 'checkmark-circle':'radio-button-off'}}"></ion-icon>
            </button>
        </ion-item-options>
        <ion-item-options side="right">
            <button ion-button icon-left color="primary" (click)="sendWorkByEmail(work)">
                <ion-icon name="mail"></ion-icon>
                Email
            </button>
        </ion-item-options>
    </ion-item-sliding>
</ion-list>
</ion-content>

Другая информация:

Баг появился в RC4, в RC3 все было ОК.

Ионная информация: (запустите ionic info из командной строки терминала/команды и вставьте вывод ниже):

Cordova CLI: 6.3.1 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v4.2.6
Xcode version: Not installed

Самый полезный комментарий

У меня также была эта проблема. Ошибка заключается в вычислении img::top и img::bottom в ion-img. Это будет использоваться для установки флага canRequest и canRender в Content::updateImgs для ion-img при прокрутке.
Моим первым обходным решением было расширение 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);
        }
      };
    }
  }
}

Все 90 Комментарий

У меня такая же проблема с моим приложением после обновления до rc4.

Я столкнулся с аналогичной проблемой с RC 4, в RC 3 все работало нормально.

Та же проблема с моей стороны

попробуйте использовать просто "img" вместо "ion-img". Работал на меня.

"ion-img" перестал работать и у меня в rc4 (даже без виртуальной прокрутки). Может ли замена на «img» вызвать проблемы с производительностью в более длинных списках?

@sajTempler да, это работает, но мы теряем преимущества производительности, такие как ленивая загрузка, которая идет с ion-img

Вы все еще можете использовать ленивый загрузчик ng2. Есть два или больше. Я использую этот https://github.com/tjoskar/ng2-lazyload-image

Чао народ,
ion-img работает нормально, только если тег находится в видимом содержании. Каждый список, сегмент и т. Д. .... не работает.
Мое временное исправление:

  1. открыть node_modules/ionic-angular/component/img/img.js
  2. измените функцию ngAferContentInit на:

    Img.prototype.ngAfterContentInit = функция () {
    вар _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 jgw96 Я отправил вам образец по электронной почте

У вас все еще есть проблема? «ion-img» не работает должным образом в моем приложении, но я не могу найти объяснение на данный момент

То же самое. Это было исправлено?

@naveedahmed1 Не могли бы вы опубликовать здесь свой образец? не уверен, что мы говорим об одной и той же проблеме

Мы также столкнулись с этой проблемой с нашей невиртуальной сеткой прокрутки. Мы воспроизвели проблему в плункере . Кажется, он отлично работает в конечном (не виртуальном) списке. Всякий раз, когда мы добавляем ion-infinite-scroll в список, ion-images показывает проблемы с загрузкой и выгрузкой.

Так что «обычные» списки работают нормально. Списки с виртуальным прокруткой или бесконечным прокруткой, похоже, имеют проблемы.

RC5 - та же проблема

Очевидно, ion-img следует использовать только в сочетании с virtualScroll:
https://github.com/driftyco/ionic/commit/a5bbbbd55cbd0e256614b6a1062aabbab4b1f21bd

У меня точно такое же поведение, как у @pavimus

После виртуального буфера прокрутки изображение не появляется, класс css "img-unloaded" (см. скриншот ниже)

ionimg

с ionic 2 финал. Пожалуйста, не могли бы вы пообщаться по этой проблеме?

У меня есть эта ошибка и в последней версии ionic

Поскольку нам действительно нужно было, чтобы это работало в нашей прокручиваемой сетке изображений (ion-grid, без виртуальной прокрутки), мы временно заменили файл <project_root>/node_modules/ionic-angular/components/img/img.js в нашем проекте этим gist .

После некоторого копания выясняется, что _top_ и _bottom_ ion-img не относятся к абсолютной вершине контейнера, в котором он находится, что приводит к загрузке/выгрузке неправильных изображений. См. строки 231 и 242 сути для обходного пути.

Мы также пытались расширить ion-img, но без особого успеха. И создание (временной) пользовательской версии файлов Ionic dist и использование ее в качестве локальной зависимости также кажется более сложным, чем мы думали. Поэтому, пока команда Ionic работает над этим, мы будем использовать этот обходной путь.

@sajTempler Можно ли загружать изображения только при остановке прокрутки с помощью этого плагина?

Эта и некоторые другие ошибки (изображения не реагируют и только 5x5 на chrome/android, изображения не загружаются при первом запуске до любой прокрутки...) сломали производственное приложение, которое в значительной степени зависит от показа статей с лениво загружаемыми изображениями.
Хорошо, что мы не получаем никакой документации по таким изменениям. Не то, чтобы это была какая-то новость.

@ ventr1x Мне также интересно, что делают разработчики, потому что эта критическая ошибка все еще открыта с 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

можно легко воспроизвести с Ionic 3.1.1 здесь https://github.com/shprink/ionic-withwebworker-vs-withoutwebworker

Хотя это не связано с проблемой, @shprink вы нашли способ запустить полное ионное приложение из веб-воркера?

Ничего подобного еще не пробовал @naveedahmed1

Хорошо, в ссылке, которой вы поделились, был вебворкер в URL-адресе, поэтому я подумал, что вы, возможно, попробовали это. Я только что проверил, что вы используете сервисных работников. Но, к сожалению, сервис-воркеры не поддерживаются на устройстве, в то время как веб-воркеры также работают на устройстве.

ion-img в виртуальной прокрутке должен загружать img в веб-воркере, поэтому он указан в заголовке.

Я заменил ion-img на img , и он отлично работает в виртуальной прокрутке, используя img вместо ion-img .

В документе говорится, что из соображений производительности следует использовать ion-img , см.: https://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/

Таким образом, переход на img вместо ion-img не может быть постоянным решением, и я надеюсь, что эта давняя ошибка будет исправлена ​​в ближайшее время.

@manucorporat Есть прогресс в этом вопросе?

+1

У меня также была эта проблема. Ошибка заключается в вычислении img::top и img::bottom в ion-img. Это будет использоваться для установки флага canRequest и canRender в Content::updateImgs для ion-img при прокрутке.
Моим первым обходным решением было расширение 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 спасибо за ответ
я новичок в ionic и angular (фактически тестирую ionic vs react native)

в какой файл я должен вставить это, пожалуйста? в app.components.ts?

@DavidWiesner , спасибо за решение. Можете ли вы предоставить нам пример? Я застрял с функцией updateImgs()

@alainib

для первого обходного пути

вам нужно создать новый файл, например, src/components/virtual-ion-img.ts, этот новый компонент должен быть зарегистрирован в src/app/app.module.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
    ]
})

Затем вы можете использовать тег <virtual-ion-img [src]="url"></virtual-ion-img> вместо <ion-img> , как описано в http://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/#images -within-virtual. -прокрутка

для второго обходного пути

Просто отредактируйте файл страницы машинописного текста, внутри которого есть виртуальная прокрутка, и добавьте импорт, материал ViewChild и метод ngAfterViewInit .

@ kabus202 Я отредактировал свой комментарий и добавил отсутствующий оператор импорта. Функция updateImgs определена в пакете содержимого ionic angular и должна быть импортирована.

@DavidWiesner Первый обходной путь работает лучше, но я все еще вижу устаревшие изображения вместо изображений, которые не загружаются.

@DavidWiesner : Большое спасибо! Ваш первый обходной путь, кажется, отлично работает для меня (в очень простом примере, который я создал, чтобы убедить себя, что я не сумасшедший и что VirtualScroll действительно сломан), сейчас я попробую его в реальном приложении.

Не могли бы вы сделать запрос на включение, чтобы исправить фактический компонент Ionic _Img_?

@DavidWiesner спасибо за объяснение.
У меня все еще есть проблемы, извините (я новичок и одновременно пытаюсь реагировать/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 {}

виртуальный-ion-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-код;)

с 'src' я получаю эту ошибку

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;
  }
}

Прошло полгода, почему не исправили?

@WangRongda Вы отправили PR, который должен был быть принят, который исправляет это?

@janpio Волшебным образом сейчас он отображается нормально. У меня были проблемы несколько дней, потому что ion-img не может нормально отображаться. Извините.

Все еще есть проблема, в списке с ~ 200 элементами с удаленными изображениями изображения либо не загружаются, либо зашифрованы (изображения из предыдущих элементов находятся в текущем элементе). Есть идеи, как это исправить? Я пробовал решение с виртуальным ионом-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 script). Команда Ionic отлично работает, но у фреймворка есть проблемы с производительностью. В моем текущем приложении я получил статический список максимум из 50 элементов с изображениями (из-за ошибки виртуальной прокрутки), и когда я нажимаю кнопку «Назад», возникает задержка (я просто использую popView, поведение по умолчанию). Этого отставания нет, например, когда в моих списках 15-20 элементов.
Более того, в iOS, когда устройство находится в режиме экономии заряда батареи (и процессор, вероятно, замедляет работу), производительность еще хуже, почти невозможно использовать.

@dspachos несколько месяцев назад я также подумал, что это виртуальная прокрутка, она должна быть главным приоритетом, чтобы заставить ее работать как шарм, поэтому я выбрал ionic вместо nativescript, но теперь грустно слышать, что он все еще не работает, и мы не можем получить производительность без задержек с помощью огромные списки данных.

У меня была такая же проблема, но я знаю, что в моих списках будет меньше 150 элементов. Я попытался использовать img вместо ion-img , и он отлично работает без потери производительности. Я потерял некоторое время, пытаясь решить с помощью ion-img , но на самом деле не всем спискам нужен этот ресурс.

@diegomachado1 Вы уверены, что ваши изображения находятся в правильном положении? Пожалуйста, замедлите сетевое соединение, а затем повторите попытку. Когда некоторые изображения не загружаются, предыдущие изображения встают на свои места и конфликтуют друг с другом.

2017-08-16 и ionic 3.6, и проблема все еще существует.
В моем случае я применяю второе исправление (опубликовано выше), и оно работает.

@decpio Не могли бы вы рассказать нам, что именно вы сделали?

хорошо,

Я добавил на свою сломанную страницу:
импортировать {Component, ViewChild} из '@angular/core';
импортировать {updateImgs} из 'ionic-angular/components/content/content';
импортировать { Img } из 'ionic-angular/components/img/img-interface';
импортировать {Content} из '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 (последнюю на момент написания этой статьи), и она работает так, как ожидалось.

Второй тоже очень хорошо работает. Но я не хотел его использовать из-за проблем с шириной и высотой. Я также столкнулся с некоторыми проблемами, когда нижние элементы перекрываются элементами над ними, если их изображение не загружено. Но когда я прокручиваю вниз, проблемы с перекрытием исчезают. Предыдущие элементы, которые исчезли из области просмотра, начали перекрываться. И как только эти элементы появятся в области просмотра и изображения снова загрузятся, проблема с перекрытием для этих пакетов исчезнет. Просто к вашему сведению.

@decpio ваше решение идеально подходит для меня. Изображения остаются «незагруженными», пока прокрутка не достигает их, но загружаются и появляются, когда это должно быть. Большое Вам спасибо!!!

Замечено только одно, если размер экрана/окна/рамки меняется после загрузки страницы, lacy load все равно работает только для того количества элементов, которые находятся в пределах диапазона инициализации. Но это может быть вызвано уже исходным поведением.

спасибо @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 не понимает, что виртуальная прокрутка не работает. В журнале изменений 3.8 есть запись с надписью «виртуальная прокрутка: исправление мерцания». Зачем вам исправлять некоторые проблемы с мерцанием для функции, которая, как вы знаете, вообще не работает?

Я согласен , @nicolus , команда Ionic не понимает, что виртуальная прокрутка / ion-img не работает и что виртуальная прокрутка не работает с ion-refresh. @HugoHeneault @manucorporat @adamdbradley

@HugoHeneault Я вообще не работал с ion-img. Я, наверное, должен был, но не сделал. Я могу посмотреть, но у меня нет ссылки на то, что сломано.

@nicolus запись в журнале изменений взята из PR, который я отправил сам, который устраняет проблему регрессии в виртуальной прокрутке. Я понимаю ваше разочарование, но то, что PR устранил конкретную проблему с VS, которая делала его непригодным для использования, когда базовый набор данных часто обновлялся, не было полной переработкой компонента, который решил все проблемы.

Я также согласен с тем, что VS требует гораздо большего внимания, но у него есть две основные проблемы, которые, вероятно, делают его обслуживание нежизнеспособным:

  1. Виртуальная прокрутка — сложная проблема, которую нужно решить в первую очередь. Очень немногие фреймворки/библиотеки успешно решили эту проблему и с некоторыми ограничениями. Ionic VS пытается решить все: переменный размер элемента, несколько столбцов, верхние/нижние колонтитулы для каждого элемента, изображения, изменение размера и т. д. Существующая реализация прошла через различные циклы рефакторинга, исправляя ошибки здесь и там, многие из которых не связаны с самим компонентом (посмотрите в пункте 2 для получения дополнительной информации)
  2. Ионный виртуальный свиток взаимодействует со многими ионными компонентами. Ion-img для изображений, бесконечная прокрутка для загрузки большего количества данных, контента для прокрутки и т. д. Также предполагается отображать как ионные элементы ion-item, ion-card и т. д., так и пользовательские угловые элементы.

Эта сложность слишком велика для PR, и она требует полной переработки того, что делает виртуальная прокрутка (что означает, что она должна соответствовать целям команды ionic), как она это делает и какое взаимодействие с другими компонентами она должна иметь.

Переходя на ionic v4, я думаю, что многие из них изменятся (во-первых, он, вероятно, сможет отображать только другие веб-компоненты, а не угловые компоненты внутри него), как сегодня делает Iron-List полимера, поэтому не уверен, что приложит усилия для исправления текущая реализация имеет реальную ценность для людей, которые будут продолжать использовать ionic framework после выпуска v4 в своих проектах. Я тоже ищу варианты выхода из этой кроличьей норы, так как без виртуальной прокрутки мы не можем конкурировать с нативными приложениями в рендеринге реалистичного объема данных.

@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/

У меня была такая же проблема с отображением изображения ввнутри [virtualScroll], как мне их исправить.

Вам нужно дождаться ionic v4.

Было бы глупо полагать, что это исправят в Ionic 4.
У нас будут новые баги, но команда сосредоточится на Ionic 5, затем на 6, оставляя много багов для каждой новой версии.
Со стороны React есть риск поломки изменений в каждой версии, но, по крайней мере, мы знаем, чего ожидать.
Очень разочарован Ionic... Недостойно так долго тянуть баги и позволять пользователям их исправлять.

@ mopi1402 mopi1402 Я знаю, что то, как команда ionic решала проблемы в прошлом, не очень хорошо. Но если вы хотите узнать, как они будут обрабатывать версии и предстоящие проблемы, вам следует прочитать
https://blog.ionicframework.com/whats-the-issue-with-issues/
https://blog.ionicframework.com/ionic-semantic-versioning-release-schedule-and-lts/

Не забывайте, что ionic framework имеет открытый исходный код и любой может помочь решить проблемы. :)

@ mopi1402 mopi1402 Если вы разработчик Angular, я предлагаю Nativescript вместо react-native.
Здесь вы можете узнать, почему Nativescript лучше, чем реагировать.

Я согласен с @mopi1402 , это одна из наиболее часто используемых функций.

Все еще не работает в бета-версии v4.

нехорошо, что он не работает с Ionic 4

Ionic — это программное обеспечение с открытым исходным кодом, ребята, если вы хотите, чтобы что-то было исправлено быстро, вы можете создать патч и отправить PR 👍

@HugoHeneault : это программное обеспечение с открытым исходным кодом, за которое я плачу 29 долларов в месяц через свою профессиональную подписку (я имею в виду, что сама структура бесплатна, но это не похоже на то, что они некоммерческая организация, они предоставляют структуру бесплатно для того, чтобы сделать деньги на подписки), поэтому я не ожидаю, что мне придется чинить это самому бесплатно.

Я могу понять, что эту проблему сложно исправить, что ionic 4 все еще находится в стадии бета-тестирования, что это проблема с низким приоритетом... Все это вполне веские причины, но "это OSS, исправь это сам, лол" - нет.

@nicolus Вы совершенно правы, и я также жаловался, когда услуги, за которые я плачу, не работали. Но мы должны иметь в виду, что даже если компания Ionic зарабатывает деньги на услугах премиум-класса, многие разработчики из их команд много работают и должны зарабатывать себе на жизнь... для бесплатного инструмента, которым каждый может пользоваться бесплатно.

Для меня это то, как работают OSS: вы не обязаны платить за их услуги и можете создавать потрясающие приложения, не платя ни цента, но они предоставляют услуги, которые облегчают вашу жизнь. Я также плачу за многие профессиональные подписки, что не означает, что я не могу помочь, когда возможно исправление, не тратя на это несколько дней.

Эта проблема была автоматически идентифицирована как проблема Ionic 3. Недавно мы переместили Ionic 3 в отдельный репозиторий. Я перемещаю эту проблему в репозиторий Ionic 3. Пожалуйста, отслеживайте эту проблему там.

Если я допустил ошибку, и если эта проблема все еще актуальна для Ionic 4, сообщите об этом команде Ionic Framework!

Спасибо за использование Ionic!

Задача перемещена по адресу: https://github.com/ionic-team/ionic-v3/issues/148 .

Была ли эта страница полезной?
0 / 5 - 0 рейтинги