加載圖像時UITableViewCells中的零星行爲

Question

我有一個呈現註釋的表視圖。每條評論都包含一個標籤和一個提供作者個人資料圖片的UIImage。加載表格時圖像出現的方式沒有模式。有時他們加載罰款。其他時候，佔位符圖像出現，圖像永不加載。如果我滾動，行爲會有所不同。我正在使用AlamofireImage。

經過一番研究，我發現這個帖子裏的建議是呼籲

self.tableView.beginUpdates() 
self.tableView.endUpdates() 

在AlamofireImage的完成處理程序。這根本沒有效果。

這裏是我的原代碼：

func tableView(_ tableView: UITableView, cellForRowAt.....{ 
... 
    let myURL = Comment.profileImageURL 
      if Comment.profileImageURL != nil { 
       profileImage.af_setImage(withURL: myURL!, placeholderImage: #imageLiteral(resourceName: "Profile Image")) 
      } else { 
       profileImage.image = UIImage(named: "Profile Image") 
      } 

這裏是基於this question's recommendation更新（在頁面上最後的答案）：

let myURL = comment.profileImageURL 
    if comment.profileImageURL != nil { 
      cell.profileImage.af_setImage(
          withURL: myURL!, 
          placeholderImage: #imageLiteral(resourceName: "Profile Image"), 
          filter: nil, 
          imageTransition: UIImageView.ImageTransition.crossDissolve(0.5), 
          runImageTransitionIfCached: false) { 
           // Completion closure 
           response in 
           // Check if the image isn't already cached 
           if response.response != nil { 
            // Force the cell update 
            self.tableView.beginUpdates() 
            self.tableView.endUpdates() 
           } 
         } 
    } else { 
      cell.profileImage.image = UIImage(named: "Profile Image") 
     } 

==== ====編輯

添加額外的信息，希望它會有所幫助： 我試過按照下面的建議設置profileImage.image = nil。我也取消了下面建議的prepareForReuse()的下載無效。

調用圖像之前，我做的UIImageView

profileImage.layer.cornerRadius = profileImage.bounds.size.width/2 
profileImage.clipsToBounds = true 
profileImage.layer.borderWidth = 2 
profileImage.layer.borderColor = UIColor(red:222/255.0, green:225/255.0, blue:227/255.0, alpha: 1.0).cgColor 

下面的一些配置是ImageView的XCode中設置：

最後的問題本身。大約50％的時間我在視圖或滾動之間來回移動，佔位符圖像出現在實際圖像的位置。事實上。佔位符經常出現在第一次加載。

===編輯＃2 ===

我試圖按照阿什利米爾斯第二個建議。我檢查AlamofireImage完成處理程序中的圖像URL，結果很奇怪。我只是加載了表格視圖。如下圖所示裝精的所有圖片：

我打印出來的圖像URL時完成處理火災和它看起來罰款：

我在完成 可選的是（http://www.smarttapp.com/Portals/0/Users/018/18/18/sballmer.jpg） 我在完成 可選（http://www.smarttapp.com/Portals/0/Users/018/18/18/sballmer.jpg） 我在完成 可選（http://www.smarttapp.com/Portals/0/Users/011/11/11/Elon%20Musk.jpeg） 我在完成 可選（http://www.smarttapp.com/Portals/_default/Users/001/01/1/Martin%20Profile.jpg）

使用導航欄，我退了出來，然後重新和圖像的顯示的所有佔位符圖片：

打印出如下：

我已完成無 我已完成無 我已完成無

最後，這是圖像加載代碼並完成處理：我在這一點上都試過了

let myURL = Comment.profileImageURL 
     if Comment.profileImageURL != nil { 
      // profileImage.af_setImage(withURL: myURL!, placeholderImage: #imageLiteral(resourceName: "Profile Image")) 
      profileImage.af_setImage(
       withURL: myURL!, 
       placeholderImage: #imageLiteral(resourceName: "Profile Image"), 
       filter: nil, 
       completion:{ image in 
        print("I'm in completion") 
        print(image.response?.url) 
        self.setNeedsLayout() 
        self.layoutIfNeeded() 
      }) 

     } else { 
      profileImage.image = UIImage(named: "Profile Image") 
     } 

。請幫忙。

Answer 1

UITableViewControllerreuses cells。爲了防止舊圖像再次出現在尚未完全加載的單元中，請在加載之前將單元格的圖像設置爲nil。

cell.profileImage.image = nil 

let myURL = comment.profileImageURL 

if comment.profileImageURL != nil { 
    [...] 
} else { 
    cell.profileImage.image = UIImage(named: "Profile Image") 
} 

Answer 2

如果從屏幕上滾動出來，您在圖像中顯示的每個單元格都可以重複使用。使用af_setImage將獲取圖像，並在接收到響應時顯示該圖像，但到那時該單元格可能會被重用，並試圖在不同的URL上顯示圖像。

您可以通過兩種方式處理這個問題，但首先要做的是一個Comment財產有添加到您的細胞，並處理下載，而不是在視圖控制器（你可能會發現使你的所有IBOutlet性能fileprivate這種幫助 - 它確保你不能從視圖控制器更新單元格的UI）

1）當電池被重用取消下載請求......

override func prepareForResuse() { 
    profileImage.af_cancelImageRequest 
} 

這可以防止響應對於之前的URL被返回，但意味着圖像不是這樣做的wnloaded。

2）檢查響應的URL是你期望的。

var requestedURL: URL? 
var comment: Comment? { 
    didSet { 
     if let myURL = Comment.profileImageURL { 
      requestedURL = myURL 

      // Fetch image from URL and when response is received, 
      // check self.myURL == response.url 

     } else { 
      profileImage.image = UIImage(named: "Profile Image") 
     } 
    } 
} 

這樣，即使沒有顯示圖片，圖片仍然會被下載。