0

我正在我的页面上加载一些图像(来自文件路径),它们可能很重,所以我创建了 .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 获取图像。

有可能克服这个问题吗?

4

1 回答 1

0

您正在调用.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');
        };
    });
});
于 2019-06-30T02:54:52.653 回答