Cache images for fast load

peter liles 556 Reputation points
2022-09-26T23:33:13.59+00:00

I have a image element that loads file data when a imagebutton is selected inside datalist using select event procedure.
Now i am wondering instead of downloading images everytime i select a image if i should save selected images in memory just as sqldatasource allows you to do!
Is this practical and how is it done? My image data is converted into a base64 string.
MainImage.ImageUrl = Convert.ToString("data:image/jpg;base64,") & base64String

Or should i not bother and continue as is. I have a total of six images that are repeatedly selected.

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,304 questions
0 comments No comments
{count} votes

Accepted answer
  1. Lan Huang-MSFT 26,196 Reputation points Microsoft Vendor
    2022-09-27T05:43:16.707+00:00

    Hi @peter liles ,
    From your description, I think you need something like stream, you can check MemoryStream.
    MemoryStream Class:creates a stream whose backing store is memory.
    https://learn.microsoft.com/en-us/dotnet/api/system.io.memorystream?view=net-6.0
    Example

    public string ImageToBase64()     
    {    
        string path = "***";    
        using(System.Drawing.Image image = System.Drawing.Image.FromFile(path))    
        {    
            using(MemoryStream m = new MemoryStream())    
            {    
                image.Save(m, image.RawFormat);    
                byte[] imageBytes = m.ToArray();    
                base64String = Convert.ToBase64String(imageBytes);    
                return base64String;    
            }    
        }    
    }    
    

    Of course, if you only have six images, it shouldn't affect the speed much.

    EDIT

    function preloadImages(array) {  
            if (!preloadImages.list) {  
            preloadImages.list = [];  
            }  
            var list = preloadImages.list;  
            for (var i = 0; i < array.length; i++) {       
            var img = new Image();  
            img.on load = fun ction ( ) {  
            var index = list.indexOf(this);  
            if (index !== -1) {  
                    // remove image from the array once it's loaded  
                    // for memory consumption reasons  
                    list.splice(index, 1);  
                }  
            }  
            list.push(img);  
            img.src = array[i];  
        }  
    }  
    preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"]);  
    

    Best regards,
    Lan Huang


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

1 additional answer

Sort by: Most helpful
  1. peter liles 556 Reputation points
    2022-09-27T20:10:13.627+00:00

    i was thinking more in line with optimization techniques. You know where the browser is able to store downloaded images for quick loading. i thought a similar technique was available for control element images where they could be saved in memory cache?
    I read that this type of memory is suitable for small size data so not certain it would be practical and i suppose main memory is not accessible?