This project lazy loads the videos and images present in html to speed up the loading of web pages. It also parses an html containing search for images or YouTube videos. If you find them, modify those tags and replace them with quick-to-load elements.
composer require yjmorales/img_video_lazy_loader
There are two scenarios:
- To lazy-load the video directly on the web page.
- The html content either is part of a variable or db record, and before it's presented or rendered it must be mutated in order to lazy load the video.
-
Include the following files:
src/css/img_video_lazy_loader.css
src/js/img_video_lazy_loader.js
-
Instantiate the function class ImgVideoLazyLoader:
(new ImgVideoLazyLoader())
-
Add the YouTube video to the html content:
<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>
- First mutate the html content.
<?php
// (...)
$html = "Html code here";
ImgVideoLazyLoader::lazyLoadIframe($html);
// Now $html is ready to lazy-loading
// (...)
>
-
Include the following files:
src/css/img_video_lazy_loader.css
src/js/img_video_lazy_loader.js
-
Instantiate the function class ImgVideoLazyLoader:
(new ImgVideoLazyLoader())