在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');
        };
    });
});