https://github.com/triniwiz/nativescript-image-cache-it

Image caching plugin for nativescript
https://github.com/triniwiz/nativescript-image-cache-it

Last synced: 9 months ago
JSON representation

Image caching plugin for nativescript

• Host: GitHub
• URL: https://github.com/triniwiz/nativescript-image-cache-it
• Owner: triniwiz
• License: apache-2.0
• Created: 2016-04-09T03:17:43.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2021-03-15T08:36:05.000Z (almost 5 years ago)
• Last Synced: 2024-04-13T22:28:10.852Z (almost 2 years ago)
• Language: Java
• Homepage:
• Size: 16.5 MB
• Stars: 46
• Watchers: 8
• Forks: 21
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-nativescript - Image Cache It - Image caching plugin for nativescript. (Awesome {N} [](https://github.com/sindresorhus/awesome) / Table of Contents)

README

          
[![npm](https://img.shields.io/npm/v/nativescript-image-cache-it.svg)](https://www.npmjs.com/package/nativescript-image-cache-it)

[![npm](https://img.shields.io/npm/dt/nativescript-image-cache-it.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-image-cache-it)

[![Build Status](https://travis-ci.org/triniwiz/nativescript-image-cache-it.svg?branch=master)](https://travis-ci.org/triniwiz/nativescript-image-cache-it)

# Image-Cache-It

[_Glide_](https://github.com/bumptech/glide/) - _Android_

[_SDWebImage_](https://github.com/rs/SDWebImage/) - _IOS_

## Install

#### [NativeScript 7+](https://github.com/triniwiz/nativescript-plugins)

* `tns plugin add @triniwiz/nativescript-image-cache-it`

#### NativeScript 6.5x

* `tns plugin add nativescript-image-cache-it`

#### NativeScript 4x

* `tns plugin add nativescript-image-cache-it@5.0.0-beta.20`

#### NativeScript 3x

* `tns plugin add nativescript-image-cache-it@3.0.7`

#### NativeScript 2x

* `tns plugin add nativescript-image-cache-it@1.6.0`

## Usage

```ts

import { ImageCacheIt } from 'nativescript-image-cache-it';

// **new** call in your app.ts/ main.ts/ app.js to enable image-cache to hook into the device's lowmemory events

ImageCacheIt.enableAutoMM();

```

Set image url to load.

```js

load = image;

```

Set placeholder while images are downloading.

```js

placeHolder = '~/assets/images/ph.png';

```

Set placeholder for images are that failed to download.

```js

errorHolder = '~/assets/images/broken.png';

```

Set decoded image size.

```js

decodedWidth = '300';

decodedHeight = '300';

```

Stretch

```js

stretch = "aspectFit" // (optional) aspectFit || aspectFill || fill || none

```

Prefetch

```typescript

import { ImageCacheIt } from 'nativescript-image-cache-it';

ImageCacheIt.fetchItem('https://source.unsplash.com/random').then(imageUrl =>{}).catch();

```

Delete item from cache

```typescript

import { ImageCacheIt } from 'nativescript-image-cache-it';

ImageCacheIt.deleteItem('https://source.unsplash.com/random').then().catch();

```

Get item from cache

```typescript

import { ImageCacheIt } from 'nativescript-image-cache-it';

ImageCacheIt.getItem('https://source.unsplash.com/random').then(imageUrl =>{}).catch();

```

e.g

```ts

import { ImageCacheIt } from 'nativescript-image-cache-it';

let cache = new ImageCacheIt();

cache.src = image;

cache.placeHolder = '~/assets/images/broken.png';

cache.errorHolder = '~/assets/images/ph.png';

cache.decodedWidth = '300';

cache.decodedHeight = '300';

cache.filter = 'blur(10px);';

cache.stretch = 'aspectFit';

return cache;

```

Xml markup settings

```xml

decodedWidth="300"; 

decodedHeight="300"; 

placeHolder="~/assets/images/ph.png" 

errorHolder="~/assets/images/broken.png"  

stretch = "aspectFit" 

src= "http://screenrant.com/wp-content/uploads/The-Flash-vs-the-Reverse-Flash.jpg" 

```

IMPORTANT: Make sure you include xmlns:i="nativescript-image-cache-it" on the Page element

e.g

```xml

```

### Angular

```ts

import { TNSImageCacheItModule } from 'nativescript-image-cache-it/angular';

@NgModule({

    imports: [

    TNSImageCacheItModule

    ],

    declarations: [

        AppComponent

    ],

    bootstrap: [AppComponent]

})

```

### Screenshots

#### Repeater

| Image                                                      | ImageCacheIt                                                         |

| ---------------------------------------------------------- | -------------------------------------------------------------------- |

| ![image_repeater](screenshots/image_repeater.gif?raw=true) | ![imagecacheit_repeater](screenshots/cache-it_repeater.gif?raw=true) |

#### ListView

| Image                                                       | ImageCacheIt                                                          |

| ----------------------------------------------------------- | --------------------------------------------------------------------- |

| ![image_listview](screenshots/image_list_view.gif?raw=true) | ![imagecacheit_listview](screenshots/cache-it_list_view.gif?raw=true) |