Загрузка временного изображения при загрузке изображения в 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, в которой хранятся имена файлов и пути.

Возможно ли преодолеть эту проблему?

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