Skip to content

Commit

Permalink
frontend: improve loading speed
Browse files Browse the repository at this point in the history
  • Loading branch information
@khancyr
khancyr committed Nov 14, 2023
1 parent 8264b40 commit 524e15a
Showing 1 changed file with 39 additions and 12 deletions.
51 changes: 39 additions & 12 deletions frontend/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
<!-- Place favicon.ico in the root directory -->
<link rel="icon" href="icon.png">
<link rel="mask-icon" href="icon.png" color="#ffffff">
<link rel="preconnect" href="https://img.youtube.com/">

<meta name="theme-color" content="#ffffff">
<meta name="msapplication-TileColor" content="#ffffff">
Expand Down Expand Up @@ -125,7 +126,7 @@ <h2>Latest posts on Community Blogs</h2>
<source media="(max-height: 480px)" type="image/webp"
srcset="images/ArduPilot-Motto.webp">
<source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy" style="aspect-ratio: 4/3;">
Loading Blog post
</picture>
</a>
Expand All @@ -136,7 +137,7 @@ <h2>Latest posts on Community Blogs</h2>
<source media="(max-height: 480px)" type="image/webp"
srcset="images/ArduPilot-Motto.webp">
<source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy" style="aspect-ratio: 4/3;">
Loading Blog post
</picture>
</a>
Expand All @@ -147,7 +148,7 @@ <h2>Latest posts on Community Blogs</h2>
<source media="(max-height: 480px)" type="image/webp"
srcset="images/ArduPilot-Motto.webp">
<source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy" style="aspect-ratio: 4/3;">
Loading Blog post
</picture>
</a>
Expand All @@ -160,7 +161,7 @@ <h2>Latest posts on Community Blogs</h2>
<source media="(max-height: 480px)" type="image/webp"
srcset="images/ArduPilot-Motto.webp">
<source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy" style="aspect-ratio: 4/3;">
Loading Blog post
</picture>
</a>
Expand All @@ -171,7 +172,7 @@ <h2>Latest posts on Community Blogs</h2>
<source media="(max-height: 480px)" type="image/webp"
srcset="images/ArduPilot-Motto.webp">
<source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy" style="aspect-ratio: 4/3;">
Loading Blog post
</picture>
</a>
Expand All @@ -182,7 +183,7 @@ <h2>Latest posts on Community Blogs</h2>
<source media="(max-height: 480px)" type="image/webp"
srcset="images/ArduPilot-Motto.webp">
<source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy" style="aspect-ratio: 4/3;">
Loading Blog post
</picture>
</a>
Expand All @@ -195,7 +196,7 @@ <h2>Latest posts on Community Blogs</h2>
<source media="(max-height: 480px)" type="image/webp"
srcset="images/ArduPilot-Motto.webp">
<source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy" style="aspect-ratio: 4/3;">
Loading Blog post
</picture>
</a>
Expand All @@ -206,7 +207,7 @@ <h2>Latest posts on Community Blogs</h2>
<source media="(max-height: 480px)" type="image/webp"
srcset="images/ArduPilot-Motto.webp">
<source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy" style="aspect-ratio: 4/3;">
Loading Blog post
</picture>
</a>
Expand All @@ -217,7 +218,7 @@ <h2>Latest posts on Community Blogs</h2>
<source media="(max-height: 480px)" type="image/webp"
srcset="images/ArduPilot-Motto.webp">
<source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min" loading="lazy" style="aspect-ratio: 4/3;">
Loading Blog post
</picture>
</a>
Expand Down Expand Up @@ -625,7 +626,7 @@ <h1>User Cases</h1>
</div>
</footer>

<script>
<script defer>
fetch('blog_posts.json', {
headers: {
"Pragma": "no-cache",
Expand All @@ -647,6 +648,9 @@ <h1>User Cases</h1>
img.classList.add("img-fluid", "img-thumbnail");
img.src = val.image;
img.loading = "lazy";
img.style.maxWidth = "640px";
img.style.width = "100%";
img.style.aspectRatio = "4/3";
//img.alt = val.title;

anchor.innerHTML = '';
Expand All @@ -655,11 +659,34 @@ <h1>User Cases</h1>
let iframe = document.createElement('iframe');
anchor.classList.add("embed-responsive");
iframe.classList.add("embed-responsive-item", "img-thumbnail");
iframe.src = val.youtube_link;
//iframe.src = val.youtube_link;
iframe.title = val.title;
iframe.style.maxWidth = "640px";
iframe.style.width = "100%";
iframe.style.height = "80%";
iframe.style.aspectRatio = "4/3";
iframe.loading = "lazy";
let youtubeUrl = new URL(val.youtube_link);
let videoId = youtubeUrl.pathname.split('/')[2];
let video_thumbnail = "https://img.youtube.com/vi/" + videoId + "/hqdefault.jpg";
iframe.srcdoc = `<style>
body, .yt_img {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
display: flex;
justify-content: center;
object-fit: cover;
}
</style>
<a href='${val.youtube_link}?autoplay=1' class='yt_img'>
<img src='${video_thumbnail}' class='yt_img' />
<svg version='1.1' viewBox='0 0 68 48' width='68px' style='position: relative;' >
<path d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='#f00'></path>
<path d='M 45,24 27,14 27,34' fill='#fff'></path>
</svg>
</a>
`;

anchor.innerHTML = '';
anchor.appendChild(iframe);
Expand Down

0 comments on commit 524e15a

Please sign in to comment.