https://github.com/faboslav/yii2-progressive-media
ProgressiveMedia is a fast, optimalized and lightweight library written in plain vanilla javascript. It's focus is on eliminating unnecessary loading of non visible images and iframes and thus speeding up the web application.
https://github.com/faboslav/yii2-progressive-media
Last synced: about 2 months ago
JSON representation
ProgressiveMedia is a fast, optimalized and lightweight library written in plain vanilla javascript. It's focus is on eliminating unnecessary loading of non visible images and iframes and thus speeding up the web application.
- Host: GitHub
- URL: https://github.com/faboslav/yii2-progressive-media
- Owner: Faboslav
- License: mit
- Created: 2018-06-11T18:14:40.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-05-29T08:41:22.000Z (about 4 years ago)
- Last Synced: 2025-03-11T18:05:25.279Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 29.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
ProgressiveMedia is a fast, optimalized and lightweight library written in plain vanilla javascript.
It eliminates unnecessary loading of non visible images and iframes and thus speeding up the web application.
Only images and iframes which are visible in the viewport and it's configured offset are smoothly loaded, loading is also considered in the resize event.
Progressive media is always auto initialized and used based on the [options](#options). It also has fallback for disabled javascript.
You can [configure](#usage) ProgressiveMedia by setting up the `progressiveMediaOptions` variable.
You can also easily override strength of the blur and transition(animation) for lazy load with overriding progressive media CSS attributes.
Loading process of images is heavely inspired by the [Medium](https://medium.com/) website. Here is a preview:
**Demo:** [Check out the example](https://faboslav.github.io/progressive-media-demo/)
## Installation
The preferred way to install this extension is through [composer](http://getcomposer.org/download/).
Either run
```
php composer require faboslav/yii2-progressive-media "1.0.0"
```
or add
```
"faboslav/yii2-progressive-media ": "1.0.0"
```
to the `require` section of `composer.json` file.
## Usage
Register asset bundle
```php
\faboslav\progressivemedia\ProgressiveMediaAssetBundle::register(\Yii::$app->view);
```
As said Progressive Media library is automatically initialized and used, but you can always trigger lazy load by code:
```javascript
progressiveMedia.loadProgressiveMedia();
```
### Rendering images
Recommended resolution for image placeholders is maximum of 44x44px.
### Rendering using ProgressiveMediaHelper
```php
echo \faboslav\progressivemedia\ProgressiveMediaHelper::img($imageUrl, $placeholderImgUrl, $width, $height, $options);
```
### Rendering manually
```html
```
### Example of working image
```html
```
### Rendering iframes
### Using ProgressiveMediaHelper
```php
echo \faboslav\progressivemedia\ProgressiveMediaHelper::iframe($iframeSrc, $width, $height, $options);
```
### Rendering iframes
```html
```
### Example of working iframe
```html
```
## Options
- `viewportOffset` - offset as number of px to top and bottom in addition to the original viewport (default is half of the viewport)
- `throttleTime` - number in ms how often is the progressiveMedia load triggered when scrolling (throttle is used) (default is 50ms)
- `debounceTime` - number in ms when is the progressiveMedia load after the very last resize event (debounce is used) (default is 100ms)
## License
MIT