[VB.net/JS] Simple Async Load Image pour Telerik-RadListView

Chargement d'image asynchrone avec Javascript et VB.net dans un Telerik:RadListView asp.net

Côté Front placer un literal en bas de page.

<!-- Import your JS file -->
<asp:literal ID="litJSAsyncLoadImg" runat="server" />

 

Dans le radListView utiliser un literal plutôt qu'une balise image. Cela permettra un contrôle plus simple sur l’élément 'image'.

<telerik:RadListView ID="rlvDemo" ItemPlaceholderID="itemPlaceHolder1" runat="server">
    <ItemTemplate>
        <asp:Literal ID="imgPictureLoad" runat="server" />
    </ItemTemplate>
</telerik:RadListView>

 

 

Côté Behind.

Partial Class Demo
    Private imgAsyncLoadJS As String = ""
  
    Protected Sub Page_LoadComplete(sender As Object, e As EventArgs) Handles Me.LoadComplete
        litJSAsyncLoadImg.Text = "<script>window.onload = function() {" & imgAsyncLoadJS & "};</script>"
    End Sub
      
    '[... your Code]
      
    Protected Sub rlvDemo_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadListViewItemEventArgs) Handles rlvDemo.ItemDataBound
        Dim item As RadListViewDataItem = TryCast(e.Item, RadListViewDataItem)
          
       '[... your Object loader]
        Dim myPictureId as integer = 1
        Dim myPictureToolTip
        Dim myPictureUrl as string = "/images/myPhoto.jpg"
         
         imgPictureLoad.Text = "<img id='pict" & myPictureId & "' src='/images/no-image.jpg' alt='" & myPictureToolTip & "' title='" & myPictureToolTip & "' />"
         
        If picture1 <> "" Then '[... your Check if picture exist]
            imgAsyncLoadJS &= "asyncLoadImg('pict" & myPictureId & "', '" & myPictureUrl & "');"
        End If
    End SUb
End Class

 

Script Javascript.

function asyncLoadImg(idPict, urlPict) {
    if (idPict != "" && urlPict != "") {
        var image = document.images.namedItem(idPict);
        var loadImage = new Image();
        loadImage.onload = function(){image.src = loadImage.src;};
        loadImage.src = urlPict;
    }
};