javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf(icon): disable icon lazy loading when it's not needed

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-07-29 16:04:51 +02:00
parent b73bbffd97
commit 7292fc7d38
9 changed files with 18 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
core/src/components/action-sheet/action-sheet.tsx
View File

@ -240,9 +240,7 @@ export class ActionSheet implements OverlayInterface {
{buttons.map(b => {buttons.map(b =>
<button class={buttonClass(b)} onClick={() => this.buttonClick(b)}> <button class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
<span class="action-sheet-button-inner"> <span class="action-sheet-button-inner">
{b.icon {b.icon && <ion-icon icon={b.icon} lazy={false} class="action-sheet-icon" />}
? <ion-icon icon={b.icon} class="action-sheet-icon" />
: null}
{b.text} {b.text}
</span> </span>
</button> </button>
@ -255,12 +253,12 @@ export class ActionSheet implements OverlayInterface {
onClick={() => this.buttonClick(cancelButton)} onClick={() => this.buttonClick(cancelButton)}
> >
<span class="action-sheet-button-inner"> <span class="action-sheet-button-inner">
{cancelButton.icon {cancelButton.icon &&
? <ion-icon <ion-icon
icon={cancelButton.icon} icon={cancelButton.icon}
class="action-sheet-icon" lazy={false}
/> class="action-sheet-icon"
: null} />}
{cancelButton.text} {cancelButton.text}
</span> </span>
</button> </button>

2
core/src/components/back-button/back-button.tsx
View File

@ -80,7 +80,7 @@ export class BackButton {
class="back-button-native" class="back-button-native"
onClick={(ev) => this.onClick(ev)}> onClick={(ev) => this.onClick(ev)}>
<span class="back-button-inner"> <span class="back-button-inner">
{ backButtonIcon && <ion-icon icon={backButtonIcon}/> } { backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}/> }
{ this.mode === 'ios' && backButtonText && <span class="button-text">{backButtonText}</span> } { this.mode === 'ios' && backButtonText && <span class="button-text">{backButtonText}</span> }
{ this.mode === 'md' && <ion-ripple-effect tapClick={true} parent={this.el}/> } { this.mode === 'md' && <ion-ripple-effect tapClick={true} parent={this.el}/> }
</span> </span>

2
core/src/components/fab-button/fab-button.tsx
View File

@ -94,7 +94,7 @@ export class FabButton {
disabled={this.disabled} disabled={this.disabled}
href={this.href}> href={this.href}>
<span class="fab-button-close-icon"> <span class="fab-button-close-icon">
<ion-icon name="close"></ion-icon> <ion-icon name="close" lazy={false}></ion-icon>
</span> </span>
<span class="fab-button-inner"> <span class="fab-button-inner">
<slot></slot> <slot></slot>

2
core/src/components/item/item.tsx
View File

@ -158,7 +158,7 @@ export class Item {
<slot></slot> <slot></slot>
</div> </div>
<slot name="end"></slot> <slot name="end"></slot>
{ showDetail && <ion-icon icon={detailIcon} class="item-detail-icon"></ion-icon> } { showDetail && <ion-icon icon={detailIcon} lazy={false} class="item-detail-icon"></ion-icon> }
</div> </div>
{ state && <div class="item-state"></div> } { state && <div class="item-state"></div> }
{ clickable && mode === 'md' && <ion-ripple-effect tapClick={true} parent={el} /> } { clickable && mode === 'md' && <ion-ripple-effect tapClick={true} parent={el} /> }

2
core/src/components/refresher-content/refresher-content.tsx
View File

@ -43,7 +43,7 @@ export class RefresherContent {
<div class="refresher-pulling"> <div class="refresher-pulling">
{this.pullingIcon && {this.pullingIcon &&
<div class="refresher-pulling-icon"> <div class="refresher-pulling-icon">
<ion-icon icon={this.pullingIcon}></ion-icon> <ion-icon icon={this.pullingIcon} lazy={false}></ion-icon>
</div> </div>
} }
{this.pullingText && {this.pullingText &&

2
core/src/components/reorder/reorder.tsx
View File

@ -16,7 +16,7 @@ export class Reorder {
render() { render() {
return ( return (
<slot> <slot>
<ion-icon class="reorder-icon" name="reorder"/> <ion-icon name="reorder" lazy={false} class="reorder-icon" />
</slot> </slot>
); );
} }

6
core/src/components/searchbar/searchbar.tsx
View File

@ -331,7 +331,7 @@ export class Searchbar {
onClick={this.cancelSearchbar.bind(this)} onClick={this.cancelSearchbar.bind(this)}
class="searchbar-cancel-button"> class="searchbar-cancel-button">
{ this.mode === 'md' { this.mode === 'md'
? <ion-icon mode={this.mode} icon={this.cancelButtonIcon}></ion-icon> ? <ion-icon mode={this.mode} icon={this.cancelButtonIcon} lazy={false}></ion-icon>
: this.cancelButtonText } : this.cancelButtonText }
</button> </button>
: null; : null;
@ -339,7 +339,7 @@ export class Searchbar {
return [ return [
<div class="searchbar-input-container"> <div class="searchbar-input-container">
{ this.mode === 'md' && cancelButton } { this.mode === 'md' && cancelButton }
<ion-icon mode={this.mode} icon={searchIcon} class="searchbar-search-icon"></ion-icon> <ion-icon mode={this.mode} icon={searchIcon} lazy={false} class="searchbar-search-icon"></ion-icon>
<input <input
ref={(el) => this.nativeInput = el as HTMLInputElement} ref={(el) => this.nativeInput = el as HTMLInputElement}
class="searchbar-input" class="searchbar-input"
@ -360,7 +360,7 @@ export class Searchbar {
onClick={this.clearInput.bind(this)} onClick={this.clearInput.bind(this)}
onMouseDown={this.clearInput.bind(this)} onMouseDown={this.clearInput.bind(this)}
onTouchStart={this.clearInput.bind(this)}> onTouchStart={this.clearInput.bind(this)}>
<ion-icon mode={this.mode} icon={clearIcon} class="searchbar-clear-icon"></ion-icon> <ion-icon mode={this.mode} icon={clearIcon} lazy={false} class="searchbar-clear-icon"></ion-icon>
</button> </button>
</div>, </div>,
this.mode === 'ios' && cancelButton this.mode === 'ios' && cancelButton

2
core/src/components/tab-button/tab-button.tsx
View File

@ -72,7 +72,7 @@ export class TabButton {
class="tab-button-native" class="tab-button-native"
onKeyUp={this.onKeyUp.bind(this)} onKeyUp={this.onKeyUp.bind(this)}
onBlur={this.onBlur.bind(this)}> onBlur={this.onBlur.bind(this)}>
{ icon && <ion-icon class="tab-button-icon" icon={icon}></ion-icon> } { icon && <ion-icon class="tab-button-icon" icon={icon} lazy={false}></ion-icon> }
{ label && <span class="tab-button-text">{label}</span> } { label && <span class="tab-button-text">{label}</span> }
{ badge && <ion-badge class="tab-badge" color={badgeColor}>{badge}</ion-badge> } { badge && <ion-badge class="tab-badge" color={badgeColor}>{badge}</ion-badge> }
{ mode === 'md' && <ion-ripple-effect tapClick={true}/> } { mode === 'md' && <ion-ripple-effect tapClick={true}/> }

4
core/src/components/tabbar/tabbar.tsx
View File

@ -225,7 +225,7 @@ export class Tabbar {
if (this.scrollable) { if (this.scrollable) {
return [ return [
<ion-button onClick={() => this.scrollByTab('left')} fill="clear" class={{ inactive: !this.canScrollLeft }}> <ion-button onClick={() => this.scrollByTab('left')} fill="clear" class={{ inactive: !this.canScrollLeft }}>
<ion-icon name="arrow-dropleft"/> <ion-icon name="arrow-dropleft" lazy={false}/>
</ion-button>, </ion-button>,
<ion-scroll forceOverscroll={false} ref={(scrollEl) => this.scrollEl = scrollEl as HTMLIonScrollElement}> <ion-scroll forceOverscroll={false} ref={(scrollEl) => this.scrollEl = scrollEl as HTMLIonScrollElement}>
@ -234,7 +234,7 @@ export class Tabbar {
</ion-scroll>, </ion-scroll>,
<ion-button onClick={() => this.scrollByTab('right')} fill="clear" class={{ inactive: !this.canScrollRight }}> <ion-button onClick={() => this.scrollByTab('right')} fill="clear" class={{ inactive: !this.canScrollRight }}>
<ion-icon name="arrow-dropright"/> <ion-icon name="arrow-dropright" lazy={false}/>
</ion-button> </ion-button>
]; ];
} else { } else {