Image appears only after scroll TableView

Question

I have TableView with several text fields and image. For Image loading I use SDWebImage Library.

Here is code for TableView Source

public class ExperienceSource : UITableViewSource
{

    //UINavigationController instance, to pass it to constructor
    private UINavigationController primNav { get; set; }
    private UITableView tableView { get; set; }
    List<Experience> TableItems;
    ExperienceTableViewController owner;
    public ExperienceSource(List<Experience> items,ExperienceTableViewController owner, UINavigationController nav)
    {
        TableItems = items;
        this.owner = owner;
        primNav = nav;
    }


    public override nint RowsInSection(UITableView tableview, nint section)
    {

        if (TableItems.Count == 0)
        {


            var noDataLabel = new UILabel
            {
                Text = "No Experiences at your location at this time. Try to change destination",
                TextColor = UIColor.Black,
                TextAlignment = UITextAlignment.Center,
                LineBreakMode = UILineBreakMode.WordWrap,
                Lines = 0
            };
            tableview.BackgroundView = noDataLabel;
            tableview.SeparatorStyle = UITableViewCellSeparatorStyle.None;

            return TableItems.Count;
        }
        else
        {
            tableview.BackgroundView = null;
            tableview.SeparatorStyle = UITableViewCellSeparatorStyle.SingleLine;
            return TableItems.Count;
        }


    }

    public override async void RowSelected(UITableView tableView, NSIndexPath indexPath)
    {
        var selectedExperience = await ExperienceMethods.GetSelectedTour(TableItems[indexPath.Row].id);
        if (selectedExperience == "Saved")
        {
        ExperienceDetailViewController ExperienceDetailController = primNav.Storyboard.InstantiateViewController("ExperienceDetailViewController") as ExperienceDetailViewController;
        primNav.PushViewController(ExperienceDetailController, true);

        }
        else
        {
          UIAlertController okAlertController = UIAlertController.Create("", "Cannot select this experience", UIAlertControllerStyle.Alert);
        okAlertController.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
        }
        tableView.DeselectRow(indexPath, true);
    }


    public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
    {
        var cell = tableView.DequeueReusableCell("cell_id", indexPath) as ExperienceCell;
        Experience item = TableItems[indexPath.Row];
        cell.UpdateCell(item);
        return cell;
    }
}

And here is code for CustomCell

public partial class ExperienceCell : UITableViewCell
{
    UIImage picture;
    public ExperienceCell (IntPtr handle) : base (handle)
    {
    }
    internal void UpdateCell(Experience experience)
    {
            var image_url = "https://xplorpal.com/" + experience.cover_image.img_path + "/150x150/" + experience.cover_image.img_file;
            /*using (var url = new NSUrl(image_url))
            using (var data = NSData.FromUrl(url))
            picture = UIImage.LoadFromData(data);
            ExperienceImage.Image = picture;*/
            ExperienceImage.SetImage(NSUrl.FromString(image_url),
                                       UIImage.FromBundle("placeholder"),
                                       SDWebImageOptions.RefreshCached);
            ExperienceTitle.Text = experience.title;
            ExperiencePrice.Text = "$" + experience.price;
    }
    }

My problem, that images appears in UIImage only after scrolling, or go to another ViewController and after, going back.

If I use commented code vs NSUrl etc. All okay.

Where can be my problem? Why images not appears, when I using SDWebImage?

Thank's for help.

Answer 1

Table Views with large number of rows display only a small fraction of their total items at a given time.It's efficient for table views to ask for only the cells for row that are being displayed Therefor on scrolling the table view, the cells get re-used and the data within the cell is repopulated.

Since you are using a downloaded image it appears to be slow.

You can try loading the image of the exact size as the image view within the cell.

Apple developer site

Optimizing table view performance