Chargement des images de manière asynchrone sur HTML en utilisant MVC

Question

Je dois mettre en œuvre une page Web avec une photo de profil de l'utilisateur.
Parce que le chargement de l'image depuis la base de données prend environ 2 secondes pour se terminer, je dois mettre un GIF avec une animation en cercle pendant le chargement de la photo de profil.

Ensuite, une fois que la base de données a répondu complètement avec l'image, elle doit changer l'image GIF en photo de profil de l'utilisateur.

Voici le contrôleur:

        Public Async Function ProfilePicture(ByVal UserId As Integer) As Task(Of ActionResult)
            Using oUser As New User
                oUser.UserID = UserId
                Dim oData As Byte() = Await oUser.RetrievePicFromDb
                If oData IsNot Nothing AndAlso oData.Length > 0 Then
                    Return File(oData, "image/jpg", "")
                Else
                    Return File("~/Content/Images/default-profile.png", "image/jpg", "")
                End If
            End Using
        End Function

Voici la récupération de données depuis la base de données:

Public Async Function RetrievePicFromDb() As Task(Of Byte())
        Dim b As Byte()
        Try
            Using cn As New SqlClient.SqlConnection
                cn.ConnectionString = ConfigurationManager.ConnectionStrings("SQLServer").ConnectionString
                cn.Open()
                Dim oCmd As New SqlClient.SqlCommand
                oCmd.Connection = cn
                oCmd.CommandType = CommandType.Text

                oCmd.Parameters.Clear()
                oCmd.Parameters.AddWithValue("@UserID", UserID)

                oCmd.CommandText = "Select Picture From Users Where UserID = @UserID"
                Dim iCol As Integer = 0
                Dim oReader As SqlClient.SqlDataReader = oCmd.ExecuteReader
                oReader.Read()
                Dim bImageByte(oReader.GetBytes(iCol, 0, Nothing, 0, Integer.MaxValue) - 1) As Byte
                oReader.GetBytes(iCol, 0, bImageByte, 0, bImageByte.Length)
                Dim ms As New System.IO.MemoryStream(bImageByte)
                Using ms
                    Dim jpgMS = New System.IO.MemoryStream
                    Dim jpgImage As System.Drawing.Image = System.Drawing.Image.FromStream(ms)

                    jpgImage.Save(jpgMS, System.Drawing.Imaging.ImageFormat.Jpeg)
                    b = jpgMS.ToArray()
                End Using
                oReader.Close()
                cn.Close()
            End Using
            Return b
        Catch ex As Exception
            Return Nothing
        End Try
    End Function

Un message d'avertissement est généré:

et l'image affichée est:

Toute aide est appréciée!

Answer 1

Essayez d'utiliser cette await Task.Run(() => @Votre fonction synchrone);