Dynamically creating images with URI encoding Asynchronously with lazy load in a Web Forms application

I'm dynamically creating many images in a Web Forms application with data URI encoding (no HttpHandler). The images are loaded from a database and I'm filtering with Isotope and lazy loading. I'm using asynchronous tasks in the page load to fetch the data and load into the image controls. I've created thumbnails and applied image compression as well. Regardless, page load is very slow. I have a white page until all content is loaded. Am I handling the Async methods correctly? Shouldn't this allow the display of the other content on the page first?

Page Load Method

RegisterAsyncTask(new PageAsyncTask(LoadImages));

Load Images method:

    public Task LoadImages()
    {
        //Get Data from DB
        DataTable dtImages = GetData();
        int id = 0;
        foreach (DataRow row in dtImages.Rows)
        {
            id = Convert.ToInt32(row["FILE_ID"].ToString());
            var category = row["CATEGORY"].ToString();
            Byte[] bytes = ((Byte[])row["THUMBNAIL_CONTENT"]);
            
            //Method to create the content on the page:
            CreateDiv(id, bytes);
        }
        return Task.FromResult(0);
    }
    

The method to create the HTML Generic Controls:

    public void CreateDiv(int imageID, byte[] fileBytes)
    {
        System.Web.UI.WebControls.Image image = new System.Web.UI.WebControls.Image();
        image.ID = "Image" + imageID.ToString() + "";
        if (imageID != 0)
        {
        //My animated gif:
            image.ImageUrl = "images/loader.gif"; ;
        }
        image.Attributes.Add("class", "img-fluid lazy");
        //The actual thumbnail:
        image.Attributes.Add("data-src", GetImage(fileBytes));
        image.Visible = true;
        PlaceHoldersDiv.Controls.Add(image);
    }
    

Method to return the image URI:

    public string GetImage(object img)
    {
        return "data:image/jpg;base64," + Convert.ToBase64String((byte[])img);
    }
    

Lazy loading script:

document.addEventListener("DOMContentLoaded", function () {
    var lazyloadImages = document.querySelectorAll("img.lazy");
    var lazyloadThrottleTimeout;

    function lazyload() {
        if (lazyloadThrottleTimeout) {
            clearTimeout(lazyloadThrottleTimeout);
        }

        lazyloadThrottleTimeout = setTimeout(function () {
            var scrollTop = window.pageYOffset;
            lazyloadImages.forEach(function (img) {
                if (img.offsetTop < (window.innerHeight + scrollTop)) {
                    img.src = img.dataset.src;
                    img.classList.remove('lazy');
                }
            });
            if (lazyloadImages.length == 0) {
                document.removeEventListener("scroll", lazyload);
                window.removeEventListener("resize", lazyload);
                window.removeEventListener("orientationChange", lazyload);
            }
        }, 20);
    }

    document.addEventListener("scroll", lazyload);
    window.addEventListener("resize", lazyload);
    window.addEventListener("orientationChange", lazyload);
});

FYI, I tried using an Http Handler to load the images but performance was much worse!