preload images?

[vbbit]

Is there a way to preload images using asp.net c#? I'm populating 45 photos randomly from database, and display those photos in datalist control item template. I would like to be able to preload those photos that way the users are not seeing the "painting" ..

[gep13]

Hey,

Yes, there are methods to do this.

One quick question first though....

Are you "resizing" the image, say in to a thumbnail, before displaying it to the user, or are you loading the full image into the DataList control. i.e. a full resolution image into a small size on the screen?

If so, you might want to think about doing that, as that will be a big part of the problem that you are seeing.

Gary

[vbbit]

Hi, what are the methods, gep?

I retrieve the full image from the db, but then resize it by specifying with and height to 70px. So no, I am not displaying full image, but 70px.

[brin351]

When you say "resize it by specifying with and height to 70px" are you doing this in the html/control markup. If so this does not reduce the file size only the displayed size which is what Gary is referring to.

[gep13]

If so this does not reduce the file size only the displayed size which is what Gary is referring to.

Yip, this is exactly what I was referring to.

If your own has a file size of 2MB, "resizing" the image to fit into a 70px window still loads up the entire 2MB of the file. If on the other hand to inspect the byte array that makes up the file, and reduce the contents into a thumbnail, and then display that on a page, then you are actually loading up a smaller file, say 200Kb, and the time it takes to load up the page will reduce significantly.

Gary

[vbbit]

How can I do that gep? Right now I have like 2000 photos saved with the exact same size. HOw can I reduce those image programatically?

[gep13]

Hey,

You can either use something like this:

http://www.fookes.com/ezthumbs/

Which would create the thumbnails for you, which would mean you could load those into the preview page, instead of the full image.

Or, you could use something like an HttpHandler, to process the image and programmatically only give a specific file size version. You can see an example of this in the Personal Web Site Starter Kit that shipped within Visual Studio 2005. Do you have this?

Gary

[brin351]

It's common to create the thumbnail on file upload/creation and suffix it with say filename_th.jpg. That way you don't need to generate thumbnails every time it's displayed, can just be served. You can run a once off thumbnail method to do all the existing ones, 2000 images may take up to 30 minutes and will impact on server performance if it's run as part of the website. Below is some code out of a file upload image resample class of mine - there are lots of example on thumbnail images with .net, mine uses image in memory stream so I can just pass in the upload control but you can modify that to be from file.

the width_landscapeImage and height_portrateImage parameters are there because resizing is keeping the image dimentions proportional so I test what orientation the image is and limit the width or hieght based on that.

  Protected Shared Function resampleImage(ByVal fileUpload As System.Web.UI.WebControls.FileUpload, _
    ByVal width_landscapeImage As Integer, ByVal height_portrateImage As Integer) As Bitmap


        Dim TheImage As System.Drawing.Image = Nothing
        Dim TheBitmap As Bitmap = Nothing
        Dim NewBitmap As Bitmap = Nothing
        Try

            'create an image object from filestream
            TheImage = System.Drawing.Image.FromStream(fileUpload.PostedFile.InputStream)

            'create bitmap to resample from image
            TheBitmap = New Bitmap(TheImage)
            Dim TheWidth, TheHeight As Double
            TheWidth = TheBitmap.Width
            TheHeight = TheBitmap.Height

            'get resample dimentions maintaining aspect ratio
            Dim NewWidth, NewHeight As Double
            If TheWidth > TheHeight Then
                'horizontal
                NewWidth = width_landscapeImage
                NewHeight = (TheHeight / (TheWidth / NewWidth))
            Else
                'vertical
                NewHeight = height_portrateImage
                NewWidth = (TheWidth / (TheHeight / NewHeight))
            End If

            'create a new bitmap at the resampled size	
            NewBitmap = New Bitmap(TheImage, NewWidth, NewHeight)

            'Free image from server
            TheImage.Dispose()
            TheBitmap.Dispose()

            'return the filename
            Return NewBitmap

        Catch ex As Exception
            Throw
        End Try

    End Function





 Public Overloads Shared Function imageUploadResample(ByVal fileUpload As System.Web.UI.WebControls.FileUpload, _
    ByVal savePath As String, ByVal width_landscapeImage As Integer, ByVal height_portrateImage As Integer) As String

        'test for image file ----- I'm testing the file to ensure it's an image > method not included
        Dim msg As String = testForImage(fileUpload)
        If Not msg = "ok" Then
            'not an image
            Return msg
        Else
            'is image proceed

            Try


                'call method to get resampled image
                Dim NewBitmap As Bitmap = resampleImage(fileUpload, width_landscapeImage, height_portrateImage)

                'Name the file
                Dim fileName As String = DateTime.Now.Ticks.ToString
                

                'converting the file to "jpg" & need the .jpg extension on the FileName	
                NewBitmap.Save(savePath & fileName & ".jpg", ImageFormat.Jpeg)

                'Free image from server
                NewBitmap.Dispose()

                'return the filename
                Return fileName & ".jpg"

            Catch ex As Exception
                Throw
            End Try


        End If

    End Function

So you call the public method imageUploadResample(.....). I'm making a random filename and returning it but you can change it to pass in a filename and as I mentioned before instead of passin in the fileUpload control you can pass in the path to a file and use System.Drawing.Image.fromFile in the resampleImage method instead.

[gep13]

Nice post!

I have no rep to give

Gary

[Pradeep1210]

Put this function somewhere in your aspx page (preferabley in the <head> section):

<script type="text/javascript" language="JavaScript">
<!--
    function PreLoadImages() {
        if (document.images) {
            var pic = new Image(100, 100);
            var args = PreLoadImages.arguments;
            for (var i = 0; i < args.length; i++) 
                pic.src = "http://www.yourwebsite.com/images/" + args[i];    
        }
    }
//-->
</script>

In your Page_Load event procedure, add this line:

ClientScript.RegisterStartupScript(GetType(String), "PreLoadImagesScript", "javascript:PreLoadImages('image1.gif','image2.gif','image3.gif')")

You can pass it the names of all the images you want to be preloaded.

[gep13]

Pradeep,

Although this technique is valid, you are doing the sampling of the images on the client, which means that you would still need to pull the entire file down from the server.

I would say that creating the thumbnail at import time, or at the time of request on the server, would be the better approach.

Gary

[Pradeep1210]

You are right on the resampling thing, though the purpose of my post was only to address the OP requirements. You people have already taken the resampling discussion in great detail and I didn't feel the need to discuss it any further.

Resampling should be done in conjunction to calling that function, if possible, to speed up the preloading of images.

So,
1. First determine which images you want to preload.
2. If they are not the same size as the original, then resample them. I prefer a cache folder for them so that if same image is being requested again and again, we don't need to resample them every time; Instead we pick from the cache folder
3. Then call the method I suggested.

[gep13]

Agreed