Блог

Я динамически создаю много изображений в приложении веб-форм с кодировкой URI данных (без HttpHandler). Изображения загружаются из базы данных, и я фильтрую с помощью Isotope и отложенной загрузки. Я использую асинхронные задачи при загрузке страницы для извлечения данных и загрузки в элементы управления изображениями. Я также создал эскизы и применил сжатие изображений. Несмотря на это, загрузка страницы происходит очень медленно. У меня есть белая страница, пока не будет загружено все содержимое. Правильно ли я обрабатываю асинхронные методы? Разве это не должно позволять сначала отображать другой контент на странице?

Метод загрузки страницы

 RegisterAsyncTask(new PageAsyncTask(LoadImages));
  

Метод загрузки изображений:

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

Метод создания общих элементов управления HTML:

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

Метод возврата URI изображения:

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

Сценарий отложенной загрузки:

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

К вашему сведению, я пытался использовать Http-обработчик для загрузки изображений, но производительность была намного хуже!