在ASP.NET C＃中的图像加载上加载临时图像

Question

我正在页面上（从文件路径）加载一些图像，这些图像可能很重，因此我创建了.min版本，并尝试先加载缩影，然后在就绪时加载原始图像。

但是我似乎无法渲染原始文件。

这是我试图实现的方法：

<script>
$(document).ready(function () {
    [].forEach.call(document.querySelectorAll('img[data-src]'), function (img) {
        img.setAttribute('src', img.getAttribute('data-src'));
        img.onload = function () {
            img.removeAttribute('data-src');
        };
    });
});

<div class="featuredImageBox" runat="server">
        <img class="center-fit" src="~/@Model.Owner/min/@Model.Featured1A"  data-src="~/@Model.Owner/@Model.HomeFeatured1A"/>
    </div>

src的缩图可以正确加载，但是data-src原始文件无法加载。 这是因为我正在动态加载图像吗？

我使用存储文件名和路径的SQL DB提取图像。

有可能克服这个问题吗？

Answer 1

您在一个空数组上调用.forEach ，因此将不进行任何处理。 您将需要对所有具有data-src属性的图像进行操作：

$(document).ready(function () {
    document.querySelectorAll('img[data-src]').forEach(function (img) {
        img.setAttribute('src', img.getAttribute('data-src'));
        img.onload = function () {
            img.removeAttribute('data-src');
        };
    });
});