如何使用swift在表视图中实现延迟加载图像
我想用我的表视图使用swift延迟加载概念。 在我的表格视图中，我显示了包含产品图像和产品名称的多个单元格。 请帮助我获得解决scheme。
旧解决scheme：
由于你没有显示任何代码。
这是你的例子。
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { // try to reuse cell let cell:CustomCell = tableView.dequeueReusableCellWithIdentifier("DealCell") as CustomCell // get the deal image let currentImage = deals[indexPath.row].imageID let unwrappedImage = currentImage var image = self.imageCache[unwrappedImage] let imageUrl = NSURL(string: "http://staging.api.cheapeat.com.au/deals/\(unwrappedImage)/photo") // reset reused cell image to placeholder cell.dealImage.image = UIImage(named: "placeholder") // async image if image == nil { let request: NSURLRequest = NSURLRequest(URL: imageUrl!) NSURLConnection.sendAsynchronousRequest(request, queue: NSOperationQueue.mainQueue(), completionHandler: {(response: NSURLResponse!,data: NSData!,error: NSError!) -> Void in if error == nil { image = UIImage(data: data) self.imageCache[unwrappedImage] = image dispatch_async(dispatch_get_main_queue(), { cell.dealImage.image = image }) } else { } }) } else{ cell.dealImage.image = image } return cell } 按照这个教程了解更多信息。 希望这会帮助你。
新解决scheme：
下面是我的朋友Leo Dabus创build的扩展，它非常易于使用：
extension UIImageView { func downloadImageFrom(link link:String, contentMode: UIViewContentMode) { NSURLSession.sharedSession().dataTaskWithURL( NSURL(string:link)!, completionHandler: { (data, response, error) -> Void in dispatch_async(dispatch_get_main_queue()) { self.contentMode = contentMode if let data = data { self.image = UIImage(data: data) } } }).resume() } }
现在在你的cellForRowAtIndexPath方法中把图像分配给单元格：
cell.cellImageView.image = UIImage(named: "placeholder") //set placeholder image first. cell.cellImageView.downloadImageFrom(link: imageLinkArray[indexPath.row], contentMode: UIViewContentMode.ScaleAspectFit) //set your image from link array.
正如罗布build议在这里注释的一些有用的库，你可以使用：
由于我还不能评论，这里是一个由Leo Dabus提供的有用扩展的Swift 3 （Xcode 8 Beta 6）版本。
extension UIImageView { func downloadImageFrom(link:String, contentMode: UIViewContentMode) { URLSession.shared.dataTask( with: NSURL(string:link)! as URL, completionHandler: { (data, response, error) -> Void in DispatchQueue.main.async { self.contentMode = contentMode if let data = data { self.image = UIImage(data: data) } } }).resume() } }
我在一个填充表格单元的类中使用这个，它在这个上下文中就像这样工作就好了，以防万一任何newbs想知道它是否会：
albumArt.image = UIImage(named: "placeholder") albumArt.downloadImageFrom(link: "http://someurl.com/image.jpg", contentMode: UIViewContentMode.scaleAspectFit)
任务
使用SDWebImage在swift 3的tableViewCell中加载asynchronous图像。
细节
xCode 8.3.1，swift 3.1
完整的样品
Info.plist（增值）
<key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> </dict>
Podfile
platform :ios, '8.0' use_frameworks! target 'stackoverflow-28694645' do pod 'Alamofire' pod 'ObjectMapper' pod 'SDWebImage' end
networkingpipe理器
import Foundation import Alamofire // data loader class NetworkManager { class func request(string: String, block: @escaping ([String: Any]?)->()) { Alamofire.request(string).responseJSON { response in if let result = response.result.value as? [String: Any] { block(result) } else { block(nil) } } } }
ItunceItem
import Foundation import ObjectMapper class ItunceItem: Mappable { var wrapperType: String? var imageUrlString:String? required convenience init?(map: Map) { self.init() } private func unwrapedDescription(value: Any?) -> String { if let value = value { return "\(value)" } return "[no data]" } var description: String { var _result = "" _result += " imageUrlString: \(unwrapedDescription(value: imageUrlString))\n" _result += " wrapperType: \(unwrapedDescription(value: wrapperType))\n" _result += " price: " return _result } func mapping(map: Map) { wrapperType <- map["wrapperType"] imageUrlString <- map["artworkUrl100"] } }
TableViewCell
import UIKit class TableViewCell: UITableViewCell { @IBOutlet weak var artworkImageView: UIImageView! }
视图控制器
import UIKit import SDWebImage class ViewController: UIViewController { @IBOutlet weak var tableView: UITableView! fileprivate var items = [ItunceItem]() fileprivate var viewControlerInited = false override func viewDidLoad() { super.viewDidLoad() tableView.dataSource = self tableView.delegate = self tableView.tableFooterView = UIView() reloadData() } override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) viewControlerInited = true } override func viewWillDisappear(_ animated: Bool) { super.viewWillDisappear(animated) disableDownloadingAllImages() } } // MARK: - Different extension ViewController { fileprivate func reloadData() { NetworkManager.request(string: "https://itunes.apple.com/search?term=navigator") { [weak self] json in if let _self = self { if let json = json, let array = json["results"] as? [[String:Any]] { var result = [ItunceItem]() for item in array { if let itunceItem = ItunceItem(JSON: item) { result.append(itunceItem) } } _self.items = result _self.tableView.reloadData() } } } } fileprivate func disableDownloadingAllImages() { SDWebImageDownloader.shared().cancelAllDownloads() } fileprivate func reloadImages() { for cell in tableView.visibleCells { if let indexPath = tableView.indexPath(for: cell) { let cell = cell as! TableViewCell if let imageUrlString = items[indexPath.row].imageUrlString, let url = URL(string: imageUrlString) { cell.artworkImageView.sd_cancelCurrentAnimationImagesLoad() cell.artworkImageView.sd_setImage(with: url) } } } } } // MARK: - UITableViewDataSource extension ViewController: UITableViewDataSource { func numberOfSections(in tableView: UITableView) -> Int { return 1 } public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return items.count } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell") as! TableViewCell return cell } } // MARK: - UITableViewDelegate extension ViewController: UITableViewDelegate { func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) { let cell = cell as! TableViewCell if let imageUrlString = items[indexPath.row].imageUrlString, let url = URL(string: imageUrlString) { cell.artworkImageView.sd_setImage(with: url) } } func tableView(_ tableView: UITableView, didEndDisplaying cell: UITableViewCell, forRowAt indexPath: IndexPath) { let cell = cell as! TableViewCell cell.artworkImageView.sd_cancelCurrentImageLoad() } }
Main.storyboard
<?xml version="1.0" encoding="UTF-8"?> <document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="12120" systemVersion="16E195" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="BYZ-38-t0r"> <device id="retina4_7" orientation="portrait"> <adaptation id="fullscreen"/> </device> <dependencies> <deployment identifier="iOS"/> <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12088"/> <capability name="Constraints to layout margins" minToolsVersion="6.0"/> <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/> </dependencies> <scenes> <!--View Controller--> <scene sceneID="tne-QT-ifu"> <objects> <viewController id="BYZ-38-t0r" customClass="ViewController" customModule="stackoverflow_28694645" customModuleProvider="target" sceneMemberID="viewController"> <layoutGuides> <viewControllerLayoutGuide type="top" id="y3c-jy-aDJ"/> <viewControllerLayoutGuide type="bottom" id="wfy-db-euE"/> </layoutGuides> <view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC"> <rect key="frame" x="0.0" y="0.0" width="375" height="667"/> <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/> <subviews> <tableView clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="prototypes" style="plain" separatorStyle="default" rowHeight="130" sectionHeaderHeight="28" sectionFooterHeight="28" translatesAutoresizingMaskIntoConstraints="NO" id="cY7-zo-hDK"> <rect key="frame" x="0.0" y="20" width="375" height="647"/> <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/> <prototypes> <tableViewCell clipsSubviews="YES" contentMode="scaleToFill" selectionStyle="default" indentationWidth="10" reuseIdentifier="TableViewCell" id="HDb-wV-LQ8" customClass="TableViewCell" customModule="stackoverflow_28694645" customModuleProvider="target"> <rect key="frame" x="0.0" y="28" width="375" height="130"/> <autoresizingMask key="autoresizingMask"/> <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="HDb-wV-LQ8" id="Gky-9l-DJ9"> <rect key="frame" x="0.0" y="0.0" width="375" height="129.5"/> <autoresizingMask key="autoresizingMask"/> <subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="YX7-DV-Qnj"> <rect key="frame" x="137" y="14" width="100" height="100"/> <constraints> <constraint firstAttribute="width" constant="100" id="p8R-if-uRk"/> </constraints> </imageView> </subviews> <constraints> <constraint firstItem="YX7-DV-Qnj" firstAttribute="centerY" secondItem="Gky-9l-DJ9" secondAttribute="centerY" id="Lg1-9u-aL6"/> <constraint firstItem="YX7-DV-Qnj" firstAttribute="top" secondItem="Gky-9l-DJ9" secondAttribute="topMargin" constant="6" id="kqB-PW-PE1"/> <constraint firstItem="YX7-DV-Qnj" firstAttribute="centerX" secondItem="Gky-9l-DJ9" secondAttribute="centerX" id="lKR-7v-WtO"/> </constraints> </tableViewCellContentView> <connections> <outlet property="artworkImageView" destination="YX7-DV-Qnj" id="spC-sk-Al3"/> </connections> </tableViewCell> </prototypes> </tableView> </subviews> <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/> <constraints> <constraint firstItem="cY7-zo-hDK" firstAttribute="top" secondItem="y3c-jy-aDJ" secondAttribute="bottom" id="J7x-rb-aus"/> <constraint firstItem="cY7-zo-hDK" firstAttribute="leading" secondItem="8bC-Xf-vdC" secondAttribute="leading" id="Zgh-3u-vEw"/> <constraint firstItem="cY7-zo-hDK" firstAttribute="bottom" secondItem="wfy-db-euE" secondAttribute="top" id="v68-ej-1ne"/> <constraint firstAttribute="trailing" secondItem="cY7-zo-hDK" secondAttribute="trailing" id="ywW-Jl-d9z"/> </constraints> </view> <connections> <outlet property="tableView" destination="cY7-zo-hDK" id="6rX-DT-7Va"/> </connections> </viewController> <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/> </objects> <point key="canvasLocation" x="-76" y="116.49175412293854"/> </scene> </scenes> </document>
结果
