Download the PHP package faboslav/yii2-progressive-media without Composer
On this page you can find all versions of the php package faboslav/yii2-progressive-media. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package yii2-progressive-media
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. It also has fallback for disabled javascript.
You can configure 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 website. Here is a preview:
Demo: Check out the example
Installation
The preferred way to install this extension is through composer.
Either run
or add
to the require
section of composer.json
file.
Usage
Register asset bundle
As said Progressive Media library is automatically initialized and used, but you can always trigger lazy load by code:
Rendering images
Recommended resolution for image placeholders is maximum of 44x44px.
Rendering using ProgressiveMediaHelper
Rendering manually
Example of working image
Rendering iframes
Using ProgressiveMediaHelper
Rendering iframes
Example of working iframe
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