Loading Temp Image on Image load in ASP.NET C#

Question

I am loading some images on my page (from File Path) and they can be heavy, so I created .min versions and try to load miniature first and then load original image when it is ready.

However I cannot seem to be able to render the original file.

Here is how I am trying to achieve this:

<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>

the miniature from src loads correctly, however the data-src original file does not load. Is this because I am loading image sdynamically?

I fetch images using SQL DB where I store filenames and path.

Is it possible to overcome this problem?

Answer 1

You are calling .forEach on an empty array, so nothing will be processed. You will need to operate on all images with a data-src attribute:

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