README

ProgressiveMedia 是一个快速、优化且轻量级的纯 JavaScript 库。

它消除了对不可见图片和 iframe 的不必要加载，从而加快了 Web 应用的速度。

只有可见于视口及其配置偏移的图片和 iframe 才会平滑加载，加载也会在调整大小事件中考虑。

Progressive media 总是自动初始化和使用，基于选项。它还为禁用的 JavaScript 提供了回退。您可以通过设置 progressiveMediaOptions 变量来配置 ProgressiveMedia。

您还可以通过覆盖 progressive media CSS 属性轻松覆盖模糊和过渡（动画）的强度。

图片的加载过程受到了Medium 网站的启发。以下是一个预览

演示： 查看示例

安装

安装此扩展的首选方法是通过 composer。

运行以下命令

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

或向 composer.json 文件的 require 部分添加以下内容

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

使用方法

注册资产包

\faboslav\progressivemedia\ProgressiveMediaAssetBundle::register(\Yii::$app->view);

如前所述，Progressive Media 库会自动初始化和使用，但您始终可以通过代码触发懒加载

progressiveMedia.loadProgressiveMedia();

渲染图片

图片占位符推荐的分辨率是最大 44x44 像素。

使用 ProgressiveMediaHelper 渲染

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

手动渲染

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

工作图片的示例

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

渲染 iframe

使用 ProgressiveMediaHelper

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

渲染 iframe

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

工作 iframe 的示例

<div class="progressive-media progressive-media-iframe progressive-media-unloaded" style="max-width: 500px; max-height: 408px;" data-src="https://#/plugins/page.php?href=https://#/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://#/plugins/page.php?href=https://#/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>

选项

• viewportOffset - 偏移量，以像素为单位，在原始视口顶部和底部之外（默认为视口的一半）
• throttleTime - 毫秒数，表示滚动时 progressiveMedia 加载触发的频率（使用了节流）（默认是 50 毫秒）
• debounceTime - 毫秒数，表示在最后一个调整大小事件后 progressiveMedia 加载的时间（使用了防抖）（默认是 100 毫秒）

许可证

MIT