PHPackages                             faboslav/yii2-progressive-media - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. faboslav/yii2-progressive-media

ActiveYii2-extension[Image & Media](/categories/media)

faboslav/yii2-progressive-media
===============================

Yii2 Progressive Media is a extension for Yii2 which allows to lazyload images and iframes

v1.0.3(4y ago)0508JavaScript

Since Nov 5Pushed 4y ago1 watchersCompare

[ Source](https://github.com/Faboslav/yii2-progressive-media)[ Packagist](https://packagist.org/packages/faboslav/yii2-progressive-media)[ RSS](/packages/faboslav-yii2-progressive-media/feed)WikiDiscussions master Synced yesterday

READMEChangelog (4)DependenciesVersions (5)Used By (0)

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:

[![Yii2 Progressive Media Preview](https://camo.githubusercontent.com/eeb8c86184cf05d2e1e752dac1dead23de554b472e820e77197e3196f9dc1bc3/68747470733a2f2f692e696d6775722e636f6d2f726733664274542e676966)](https://camo.githubusercontent.com/eeb8c86184cf05d2e1e752dac1dead23de554b472e820e77197e3196f9dc1bc3/68747470733a2f2f692e696d6775722e636f6d2f726733664274542e676966)

**Demo:** [Check out the example](https://faboslav.github.io/progressive-media-demo/)

Installation
------------

[](#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
-----

[](#usage)

Register asset bundle

```
\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:

```
progressiveMedia.loadProgressiveMedia();
```

### Rendering images

[](#rendering-images)

Recommended resolution for image placeholders is maximum of 44x44px.

### Rendering using ProgressiveMediaHelper

[](#rendering-using-progressivemediahelper)

```
echo \faboslav\progressivemedia\ProgressiveMediaHelper::img($imageUrl, $placeholderImgUrl, $width, $height, $options);
```

### Rendering manually

[](#rendering-manually)

```

```

### Example of working image

[](#example-of-working-image)

```

```

### Rendering iframes

[](#rendering-iframes)

### Using ProgressiveMediaHelper

[](#using-progressivemediahelper)

```
echo \faboslav\progressivemedia\ProgressiveMediaHelper::iframe($iframeSrc, $width, $height, $options);
```

### Rendering iframes

[](#rendering-iframes-1)

```

```

### Example of working iframe

[](#example-of-working-iframe)

```

```

Options
-------

[](#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
-------

[](#license)

MIT

###  Health Score

29

—

LowBetter than 60% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity12

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity64

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~312 days

Total

4

Last Release

1809d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/8c5223dac783c66b774d736dee6391e74cf49d8289d6f41dbabdcfc440802ffe?d=identicon)[faboslav](/maintainers/faboslav)

---

Top Contributors

[![Faboslav](https://avatars.githubusercontent.com/u/14179066?v=4)](https://github.com/Faboslav "Faboslav (32 commits)")

---

Tags

javascriptimagemediayii2extensionlazyloadingloadBlurimglazyloadiframeprogressivefaboslavprogressivemedia

### Embed Badge

![Health badge](/badges/faboslav-yii2-progressive-media/health.svg)

```
[![Health](https://phpackages.com/badges/faboslav-yii2-progressive-media/health.svg)](https://phpackages.com/packages/faboslav-yii2-progressive-media)
```

###  Alternatives

[yurkinx/yii2-image

Yii2 extension for image manipulating using Kohana Image Library.

66412.9k9](/packages/yurkinx-yii2-image)[raoul2000/yii2-jcrop-widget

This extension is a wrapper for the jQuery Image Cropping Plugin (jcrop)

10248.3k2](/packages/raoul2000-yii2-jcrop-widget)[simonvomeyser/commonmark-ext-lazy-image

Adds support for lazy images to the phpleague/commonmark markdown parser package

1821.3k1](/packages/simonvomeyser-commonmark-ext-lazy-image)[noam148/yii2-image-resize

A Yii2 component for resizing images (on the fly)

1144.6k7](/packages/noam148-yii2-image-resize)[maxmirazh33/yii2-uploadable-cropable-image

Yii2 extension for upload and crop images

1020.8k](/packages/maxmirazh33-yii2-uploadable-cropable-image)[somehow-digital/typo3-media-processing

Media Processing

101.1k](/packages/somehow-digital-typo3-media-processing)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)