Cache images for fast load

Question

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.

Answer 1

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.

Answer 2

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?