Ионная версия: (отметьте один знаком «x»)
[ ] 1.x
[х] 2.х
Я отправляю ... (отметьте один знаком "x")
[x] отчет об ошибке
[ ] запрос функции
[ ] запрос на поддержку => Пожалуйста, не отправляйте запросы на поддержку здесь, используйте один из этих каналов: https://forum.ionicframework.com/ или http://ionicworldwide.herokuapp.com/
Текущее поведение:
Когда вы используете virtualScroll и ion-img, после прокрутки вниз (когда буфер заканчивается) ion-img перестает загружать изображения
Пожалуйста, посмотрите на инспектор кода:
правильно (для моей локальной машины) и изображение доступно.
Ожидаемое поведение:
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
У меня такая же проблема с моим приложением после обновления до 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 работает нормально, только если тег находится в видимом содержании. Каждый список, сегмент и т. Д. .... не работает.
Мое временное исправление:
измените функцию 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" (см. скриншот ниже)
с 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.2import {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 требует гораздо большего внимания, но у него есть две основные проблемы, которые, вероятно, делают его обслуживание нежизнеспособным:
Эта сложность слишком велика для 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/
https://github.com/ionic-team/ionic/issues/9660#issuecomment -307314053 сработало
У меня была такая же проблема с отображением изображения в
Вам нужно дождаться 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 .
Самый полезный комментарий
У меня также была эта проблема. Ошибка заключается в вычислении
img::top
иimg::bottom
в ion-img. Это будет использоваться для установки флагаcanRequest
иcanRender
вContent::updateImgs
дляion-img
при прокрутке.Моим первым обходным решением было расширение
ion-img
для виртуальных списков.Другой вариант — исправить вычисление в
Content::imgsUpdate
, переопределив эту функцию на вашей странице.