URLからロードされた画像がUITableViewのスクロールで変化します

Question

現在、Firebaseから読み込まれているtableViewがあります。このコンテンツには、ユーザーがスクロールしたときに最終的なイメージに収まるまで変更される画像が含まれます。私は、各セルを正常にロードする前に、各セルにイメージを割り当てると仮定しますが、回避策を考え出すことはできませんでした。

私は次のようにtableViewがある移入する必要があり、現在のコード：

テーブルビュー

import UIKit 
import FirebaseAuth 
import FirebaseStorage 

class Articles: UITableViewController { 

var vcType:String = "Home" 
var rooms = [Room]() 
var articleCell = ArticlesCell() 
@IBOutlet weak var menuButton: UIBarButtonItem! 
override func viewDidLoad() { 
    super.viewDidLoad() 

    if self.vcType == "Home" 
    { 
     self.rooms += ArticlesManager.sharedClient.rooms 
    } 
    else 
    { 
     if let obj = ArticlesManager.sharedClient.catRooms[self.vcType.lowercased()] //as? [Room] 
     { 
      self.rooms += obj 
     } 
    } 
    self.tableView.reloadData() 

    ArticlesManager.sharedClient.blockValueChangeInRoomArray = { 
     newRoom in 
     if self.vcType == "Home" 
     { 
      self.rooms.append(newRoom) 
      self.rooms.sort(by: { 
       if $0.created_Date == nil 
       { 
        return false 
       } 
       if $1.created_Date == nil 
       { 
        return true 
       } 

       return $0.created_Date.compare($1.created_Date) == ComparisonResult.orderedDescending 
      }) 

     } 
     else 
     { 
      if self.vcType.lowercased() == newRoom.category 
      { 
       self.rooms.append(newRoom) 

       self.rooms.sort(by: { 
        if $0.created_Date == nil 
        { 
         return false 
        } 
        if $1.created_Date == nil 
        { 
         return true 
        } 

        return $0.created_Date.compare($1.created_Date) == ComparisonResult.orderedDescending 
       }) 

       self.tableView.reloadData() 

      } 
     } 
    } 

} 

override func numberOfSections(in tableView: UITableView) -> Int { 
    return 1 
} 

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { 
    return rooms.count 
} 

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 

    if (indexPath as NSIndexPath).row == 0 { 
     let cell2 = tableView.dequeueReusableCell(withIdentifier: "featured", for: indexPath) as! featuredCell 
     let room = rooms[(indexPath as NSIndexPath).row] 
     cell2.configureCell(room) 
     return cell2 

    } else { 

     let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! ArticlesCell 
     let room = rooms[(indexPath as NSIndexPath).row] 
     cell.configureCell(room) 
     return cell 
} 

データ

import Foundation 
import Firebase 
import FirebaseAuth 


let roomRef = FIRDatabase.database().reference() 

class Data { 

static let dataService = Data() 

fileprivate var _BASE_REF = roomRef 
fileprivate var _ROOM_REF_ = roomRef.child("rooms") 

fileprivate var _BASE_REF2 = roomRef 
fileprivate var _ROOM_REF_2 = roomRef.child("contents") 

var BASE_REF: FIRDatabaseReference { 
    return _BASE_REF 
} 

var ROOM_REF: FIRDatabaseReference { 
    return _ROOM_REF_ 
} 

var storageRef: FIRStorageReference { 
    return FIRStorage.storage().reference() 
} 

var fileURL: String! 

func fetchData(_ callback: @escaping (Room) ->()) { 
    Data.dataService.ROOM_REF.observe(.childAdded, with: { (snapshot) in 

     print("snapshot.value - \(snapshot))") 
     let room = Room(key: snapshot.key, snapshot: snapshot.value as! Dictionary<String, AnyObject>) 
     callback(room) 
    }) 
} 


} 

がTableViewCell

import UIKit 
import FirebaseStorage 

class featuredCell: UITableViewCell { 


@IBOutlet weak var featuredImage: UIImageView! 
@IBOutlet weak var featuredTitle: UITextView! 
@IBOutlet weak var featuredAuthor: UITextField! 
@IBOutlet weak var featuredDate: UITextField! 

@IBOutlet weak var featuredContent: UITextView! 
class var defaultHeight: CGFloat { get { return ((UIScreen.main.fixedCoordinateSpace.bounds.height - 64)/5) * 3}} 


func configureCell(_ room: Room) { 
    self.featuredTitle.text = room.title 
    self.featuredDate.text = room.date 
    self.featuredAuthor.text = room.author 
    self.featuredContent.text = room.story 
    if let imageURL = room.thumbnail { 
     if imageURL.hasPrefix("gs://") { 
      FIRStorage.storage().reference(forURL: imageURL).data(withMaxSize: INT64_MAX, completion: { (data, error) in 
       if let error = error { 
        print("Error downloading: \(error)") 
        return 
       } 
       self.featuredImage.image = UIImage.init(data: data!) 
      }) 
     } else if let url = URL(string: imageURL), let data = try? Foundation.Data(contentsOf: url) { 
      self.featuredImage.image = UIImage.init(data: data) 
     } 
    } 

} 

} 

ありがとうございました！

Answer 1

これは、テーブルビューの読み込みまたはスクロール中に非同期ダウンロードを使用している場合の、テーブルビューの通常の動作です。ローディングする前にイメージを消去して、効率的なネットワーク課金のために一度ダウンロードした時点でイメージデータをキャッシュに保存しておく必要があります。キャッシングを使用しない場合は、セルが再利用されるときに、常にtableviewはイメージを「再ダウンロード」します。例を見てください。

public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell") as! TableViewCell 
    let urle = self.filteredFlats[indexPath.row].flatThumbnailImage?.imageDownloadURL 
    if let url = urle 
    { 
     cell.imgv.image = nil 

     if let imagefromCache = imageCache.object(forKey: url as AnyObject) as? UIImage 
     { 
      cell.imgv.image = imagefromCache 

     } 
     else 
     { 
      cell.imgv.image = nil 
      let urlURL = URL(string: (url)) 

      URLSession.shared.dataTask(with: urlURL!, completionHandler: { (data, response, error) in 
       if error != nil 
       { 
        print(error.debugDescription) 
        return 
       } 
       DispatchQueue.main.async { 
        let imagetoCache = UIImage(data:data!) 
        self.imageCache.setObject(imagetoCache!, forKey: url as AnyObject) 
        cell.imgv.image = imagetoCache 

       } 
      }).resume() 


     } 

    } 

    return cell 



} 

このコードは私のプロジェクトからコピーされています。だから私はすでにダウンロードされているときに画像をキャッシュしています。また、私はセルを再利用するときにそれをredownloadしません。それがキャッシュされているかどうかをチェックするだけです。だからあなたは、あなたの要件を満たす行動に対してこのapporachを使うことができます。