README

这为 league/commonmark 包的版本 ^2.0 添加了对懒加载图片的支持。

安装

composer require simonvomeyser/commonmark-ext-lazy-image

composer require simonvomeyser/commonmark-ext-lazy-image "^v1.2.0"

示例

use League\CommonMark\Environment\Environment;
use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
use SimonVomEyser\CommonMarkExtension\LazyImageExtension;

$environment = new Environment([]);
$environment->addExtension(new CommonMarkCoreExtension())
            ->addExtension(new LazyImageExtension());

$converter = new MarkdownConverter($environment);
$html = $converter->convert('![alt text](/path/to/image.jpg)');

这将创建以下 HTML

<img src="/path/to/image.jpg" alt="alt text" loading="lazy" />

选项/配置

默认情况下，只会添加 loading="lazy" 属性

虽然这在未来可能足够 使用，但你也可以使用提供的选项来集成各种懒加载库。

以下是如何使用本包与 lozad 库 的示例

$environment = new Environment([
    // ... other config
    'lazy_image' => [
        'strip_src' => true, // remove the "src" to add it later via js, optional
        'html_class' => 'lozad', // the class that should be added, optional
        'data_attribute' => 'src', // how the data attribute is named that provides the source to get picked up by js, optional
    ]
]);
$environment->addExtension(new CommonMarkCoreExtension())
    ->addExtension(new LazyImageExtension());

$converter = new MarkdownConverter($environment);

$html = $converter->convert('![alt text](/path/to/image.jpg)');

这将创建以下 HTML

<img src="" alt="alt text" loading="lazy" data-src="/path/to/image.jpg" class="lozad" />