faboslav/yii2-progressive-media

There is no license information available for the latest version (v1.0.3) of this package.

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

v1.0.3 2021-05-29 08:40 UTC

Unknown License

• Aleš Fabiánek

• media
• image
• javascript
• extension
• iframe
• lazy
• loading
• load
• img
• yii2
• Blur
• lazyload
• progressive
• faboslav
• progressivemedia

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. 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

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

\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

Recommended resolution for image placeholders is maximum of 44x44px.

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