yjmorales/img_video_lazy_loader

此项目可以实现HTML中视频和图片的懒加载，以加快网页加载速度。它还可以解析包含图像或YouTube视频搜索的HTML。如果您找到了它们，可以修改这些标签并用快速加载的元素替换它们。

维护者

详细信息

github.com/yjmorales/img_video_lazy_loader

源代码

问题

安装: 15

依赖项: 0

建议者: 0

安全: 0

星星: 0

观察者: 1

分支: 0

开放问题: 0

dev-main 2024-01-24 21:48 UTC

MIT 83024601c85c98c3791c4fedb83cab3c122c8e5f

  • Yenier Jimenez <yjimenez.woop@sonnysdirect.com>

This package is auto-updated.

Last update: 2024-09-24 23:12:03 UTC

README

此项目可以实现HTML中视频和图片的懒加载，以加快网页加载速度。它还可以解析包含图像或YouTube视频搜索的HTML。如果您找到了它们，可以修改这些标签并用快速加载的元素替换它们。

安装

composer require yjmorales/img_video_lazy_loader

如何懒加载YouTube视频。

有两种情况

  • 在网页上直接懒加载视频。
  • HTML内容是变量或数据库记录的一部分，在展示或渲染之前，必须对其进行修改以实现视频的懒加载。

场景1：在网页上直接懒加载视频。

  1. 包含以下文件

    • src/css/img_video_lazy_loader.css
    • src/js/img_video_lazy_loader.js

  2. 实例化函数类 ImgVideoLazyLoader

    • (new ImgVideoLazyLoader())

  3. 将YouTube视频添加到HTML内容中

<div class="lazy-loaded" data-video-id="YOUTUBE_VIDEO_ID_HERE" data-loader="youtubeLoader">
    <div class="embed-youtube-play" data-video-id="YOUTUBE_VIDEO_ID_HERE"></div>
    <img src="https://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/default.jpg" class="thumb" data-video-id="YOUTUBE_VIDEO_ID_HERE">
</div>

场景2：在变量或数据库记录中保存的HTML内容上懒加载YouTube视频。

  1. 首先修改HTML内容。
<?php
    // (...)
    
    $html = "Html code here";
    ImgVideoLazyLoader::lazyLoadIframe($html);
    
    // Now $html is ready to lazy-loading
    
    // (...)
>

  1. 包含以下文件

    • src/css/img_video_lazy_loader.css
    • src/js/img_video_lazy_loader.js

  2. 实例化函数类 ImgVideoLazyLoader

    • (new ImgVideoLazyLoader())