Question

我有一个写在ASP.NET Core 2.2顶部的应用程序。我正在使用Razor模板引擎来创建视图。

我正在尝试延迟加载图像，以帮助提高页面的加载速度。我想不能像这样创建图像标签

<img src="" class="lazy-load" data-source="~/photos/@Model.ImageName" alt="" />

但是，在~标记之外使用波浪号src指令无法正确呈现。最终结果是这样的

<img src="" class="lazy-load" data-source="~/photos/photo1.jpg" alt="" />

但是我正在寻找结果如下所示或~指令返回的结果。

如何使用Razor引擎在data-source标签中生成URL？

我敢肯定，人们可能会想到为什么不丢下~并像这样写/photos/@Model.ImageName这样的URL。原因是我希望在将中间件应用于它们之后生成URL。在这种情况下，我将缓存过期标头应用于每个生成的资源。

这是我希望在每次生成照片网址时都包含的中间件

app.UseStaticFiles(new StaticFileOptions
{
    RequestPath = "/photos",
    OnPrepareResponse = ctx =>
    {
        const int durationInSeconds = 60 * 60 * 12;
        ctx.Context.Response.Headers[HeaderNames.CacheControl] = "public,max-age=" + durationInSeconds;
    }
});

Answer 1

您可以使用Html.Content()帮助器在data-source属性中生成URL。例如，

<img src="" class="lazy-load" data-source="@Html.Content($"~/photos/{Model.ImageName}") alt="" />

此外，由于使用缓存，请确保在设置src属性之前先检查本地缓存。您可以使用以下JavaScript解决方案进行延迟加载

if (window.caches) {
    // A this point we know  the current window supports cache
    const images = Array.prototype.slice.call(document.querySelectorAll('img.lazy-load'));

    Promise.all(images.map(img => {
        const src = img.getAttribute('data-source');
        if (!src) return false;

        // Check if response for this image is cached
        return window.caches.match(src).
            then(response => {
                if (response) {
                    // The image is cached, load it
                    img.setAttribute('src', src); // set the src
                    img.removeAttribute('data-source'); // remove the data-source to prevent it from reloading
                }
            });
    })).then(lazyLoad); // now we can lazy images!
} else {
    // At this point the cache isn't supported or does not exists
    // Lazy load all images!
    lazyLoad();
}

function lazyLoad() {
    var elements = document.querySelectorAll('img.lazy-load');
    var totalElements = elements.length;
    for (var i = 0; i < totalElements; i++) {
        var src = elements[i].getAttribute('data-source');
        if (src) {
            elements[i].setAttribute('src', src);
            elements[i].removeAttribute('data-source');
        }
    }
}

使用Razor模板引擎时，如何在数据标签中创建图像URL？

1 个答案: