TerribleDev/blog.terrible.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use lazy load html instead of custom JS

Browse Source
This commit is contained in:
Tommy Parnell
2022-03-30 14:24:58 -04:00
parent 83a41395e7
commit b3bd3492ee
3 changed files with 4 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/TerribleDev.Blog.Web/MarkExtension/PictureInline.cs
View File

@@ -40,7 +40,7 @@ namespace TerribleDev.Blog.Web.MarkExtension
{
renderer.Write(string.IsNullOrWhiteSpace(type) ? $"<img src=\"" : $"<source type=\"{type}\" srcset=\"");
renderer.Write(string.IsNullOrWhiteSpace(type) ? $"<img loading=\"lazy\" src=\"" : $"<source type=\"{type}\" srcset=\"");
var escapeUrl = link.GetDynamicUrl != null ? link.GetDynamicUrl() ?? link.Url : link.Url;
renderer.WriteEscapeUrl($"{escapeUrl}{suffix}");

6
src/TerribleDev.Blog.Web/Views/Shared/Nav.cshtml
View File

@@ -6,13 +6,13 @@
<div class="navContent">
@if(amp == true)
{
<img src="/content/tommyAvatar4.jpg" alt="An image of TerribleDev" class="round navHero" />
<img src="/content/tommyAvatar4.jpg" loading="lazy" alt="An image of TerribleDev" class="round navHero" />
}
else
{
<picture class="navHero">
<source srcset="" type="image/webp" alt="An image of TerribleDev" data-src="/content/tommyAvatar4.jpg.webp" class="lazy round" />
<img src="" alt="An image of TerribleDev" data-src="/content/tommyAvatar4.jpg" class="lazy round" />
<source srcset="/content/tommyAvatar4.jpg.webp" loading="lazy" type="image/webp" alt="An image of TerribleDev" class="round" />
<img src="/content/tommyAvatar4.jpg" loading="lazy" alt="An image of TerribleDev" class="round" />
</picture>
}
<span>Tommy "Terrible Dev" Parnell</span>

33
src/TerribleDev.Blog.Web/wwwroot/js/swi.js
View File

@@ -35,36 +35,3 @@ function attachNavToggle(elementId) {
attachNavToggle('menuBtn');
attachNavToggle('closeNav');
if(window.IntersectionObserver) {
var lazyImages = [].slice.call(document.querySelectorAll(".lazy"));
var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var lazyImage = entry.target;
if(lazyImage.dataset.src) {
lazyImage.src = lazyImage.dataset.src;
}
if(lazyImage.dataset.srcset) {
lazyImage.srcset = lazyImage.dataset.srcset;
}
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
var lazyImages = [].slice.call(document.querySelectorAll(".lazy"));
lazyImages.forEach(function(image) {
if(image.dataset.srcset) {
image.srcset = image.dataset.srcset;
}
if(image.dataset.src) {
image.src = image.dataset.src;
}
});
}