yii2-extension yii2-progressive-media

faboslav/yii2-progressive-media

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

ProgressiveMedia is a fast, optimalized and lightweight library written in plain vanilla javascript., _(*1)

It eliminates unnecessary loading of non visible images and iframes and thus speeding up the web application., _(*2)

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., _(*3)

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., _(*4)

You can also easily override strength of the blur and transition(animation) for lazy load with overriding progressive media CSS attributes., _(*5)

Loading process of images is heavely inspired by the Medium website. Here is a preview:, _(*6)

, _(*7)

Demo: Check out the example, _(*8)

Installation

The preferred way to install this extension is through composer., _(*9)

Either run, _(*10)

php composer require faboslav/yii2-progressive-media "1.0.0"

or add, _(*11)

"faboslav/yii2-progressive-media ": "1.0.0"

to the require section of composer.json file., _(*12)

Usage

Register asset bundle, _(*13)

\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:, _(*14)

progressiveMedia.loadProgressiveMedia();

Rendering images

Recommended resolution for image placeholders is maximum of 44x44px., _(*15)

Rendering using ProgressiveMediaHelper

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

Rendering manually

<div class="progressive-media progressive-media-image progressive-media-unloaded" style="max-width: {WIDTH}px; max-height: {HEIGHT}px;" data-img-src="{IMG_URL}">
    <div class="progressive-media-aspect" style="padding-bottom: {WIDTH_x_HEIGHT_ASPECT_RATIO}%;">
        <div class="progressive-media-aspect-inner">
            <img class="progressive-media-image-placeholder progressive-media-content progressive-media-blur" src="{PLACEHOLDER_IMG_URL}">
            <img class="progressive-media-image-placeholder progressive-media-image-placeholder-edge progressive-media-content" src="{PLACEHOLDER_IMG_URL}">
            <noscript>
                <img src="{IMG_URL}" class="progressive-media-image-original progressive-media-content">
            </noscript>
        </div>
    </div>
</div>

Example of working image

<div class="progressive-media progressive-media-image progressive-media-unloaded" style="max-width: 392px; max-height: 260px;" data-img-src="https://source.unsplash.com/WLUHO9A_xik/392x260">
    <div class="progressive-media-aspect" style="padding-bottom: 66.32653061%;">
        <div class="progressive-media-aspect-inner">
            <img class="progressive-media-image-placeholder progressive-media-content progressive-media-blur" src="https://source.unsplash.com/WLUHO9A_xik/44x44">
            <img class="progressive-media-image-placeholder progressive-media-image-placeholder-edge progressive-media-content" src="https://source.unsplash.com/WLUHO9A_xik/44x44">
            <noscript>
                <img src="https://source.unsplash.com/WLUHO9A_xik/392x260" class="progressive-media-image-original progressive-media-content">
            </noscript>
        </div>
    </div>
</div>

Rendering iframes

Using ProgressiveMediaHelper

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

Rendering iframes

<div class="progressive-media progressive-media-iframe progressive-media-unloaded" style="max-width: {WIDTH}px; max-height: {HEIGHT}px;" data-src="{IFRAME_URL}">
    <div class="progressive-media-aspect" style="padding-bottom: {WIDTH_x_HEIGHT_ASPECT_RATIO}%;">
        <div class="progressive-media-aspect-inner">
            <noscript>
                <iframe src="{IFRAME_URL}" class="progressive-media-content"></iframe>
            </noscript>
         </div>
    </div>
</div>

Example of working iframe

<div class="progressive-media progressive-media-iframe progressive-media-unloaded" style="max-width: 500px; max-height: 408px;" data-src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/facebook/&tabs=timeline&width=500&height=408&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId">
    <div class="progressive-media-aspect" style="padding-bottom: 81.6%;">
        <div class="progressive-media-aspect-inner">
            <noscript>
                <iframe src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/facebook/&tabs=timeline&width=500&height=408&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" class="progressive-media-content"></iframe>
            </noscript>
        </div>
    </div>
</div>

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, _(*16)