I hva an issue with populating my cells. When scrolling really fast the cells go through 2-3 images before finding the right one. I loaded up an array with a JSON of 1000 items, and used the urls from them to fetch the images with this extension:
extension UIImageView {
func downloadedFrom(url: URL, contentMode mode: UIViewContentMode = .scaleAspectFill) {
contentMode = mode
URLSession.shared.dataTask(with: url) { data, response, error in
guard
let httpURLResponse = response as? HTTPURLResponse, httpURLResponse.statusCode == 200,
let mimeType = response?.mimeType, mimeType.hasPrefix("image"),
let data = data, error == nil,
let image = UIImage(data: data)
else { return }
DispatchQueue.main.async() {
self.image = image
}
}.resume()
}
func downloadedFrom(link: String, contentMode mode: UIViewContentMode = .scaleAspectFill) {
guard let url = URL(string: link) else { return }
downloadedFrom(url: url, contentMode: mode)
}
This all works great, aside from the issue above. But I was also wondering if there was a better way to load up some of the items in the array, and then append more as I scroll? I should mention, my fetchData function, also contains the append in array function.
Thanks so much in advance.
You can override this method...
override func prepareForReuse() {
super.prepareForReuse()
//hide or reset anything you want hereafter, for example
imgView.image = nil //whatever
}
When scrolling really fast 2 - 3 images are changing because you are probably using dequeReusableCells function which means cells are being reused. As you mentioned you loaded an array with 1000 items. The trick is to use pagination first fetch 10 or maybe 20 items, then on scroll to bottom fetch the next 10 or 20.
In order to do that you may need to adjust your APIs to accommodate your request. If you are using collection view this function will help you detect if you have reached the end of collection view and it's time to fetch the next 10 or 20 items.
public func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath){}
Related
The scroll performance of my app when it downloads high resolutions images from IMGUR is slow and sluggish. Images are oddly dequeuing and rendering. Below is the code that downloads the image. I don't think the caching mechanism is working. How do I fix this?
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "PhotoTableViewCell", for: indexPath) as! PhotoTableViewCell
cell.descrpiptionLabel.text = photos[indexPath.row].title ?? "No Description"
cell.photoImageView.downloadImage(from: images[indexPath.row])
return cell
}
let imageCache = NSCache<NSString,AnyObject>()
extension UIImageView {
func downloadImage(from urlString: String ) {
guard let url = URL(string: urlString) else { return }
storeCache(url: url)
}
func storeCache(url:URL){
if let cachedImage = imageCache.object(forKey: url.absoluteString as NSString) as? UIImage {
self.image = cachedImage
}else {
let _: Void = URLSession.shared.dataTask(with: url) { [weak self] data, response, error in
guard let self = self else { return }
if error != nil { return }
DispatchQueue.main.async {
if let downloadedImage = UIImage(data: data!) {
imageCache.setObject(downloadedImage, forKey: url.absoluteString as NSString)
self.image = downloadedImage
}
}
}.resume()
}
}
}
There is a performance issue here, namely if you scroll quickly, the images for latter cells will get backlogged behind image requests for cells that are no longer visible.
To fix this, the UIImageView extension should save a reference to the URLSessionDataTask, and downloadImage should see if there is an request in progress, and if it is for a different URL (presumably for a cell that is no longer visible), it should cancel that request before starting another network request for the visible cell.
The only trick is that extensions cannot add stored properties, so you will have to use “associated objects” (e.g., objc_getAssociatedObject and objc_setAssociatedObject) to keep track of these references.
See downloading and caching images from url asynchronously for example implementation.
Unrelated to your question, downloadImage should, before initiating an asynchronous network request, set the image to nil or to a placeholder image. If a cell is reused, the last image will be shown until the download is done. Make sure to initialize the image before starting an asynchronous process, to make sure you don’t see the old image until the new one is retrieved.
Above I answered the performance question if you scroll quickly, where images will appear very slowly. That having been said, there is a second performance issue, namely that you are caching and using images that are larger than what is required by your UI. This can cause a different performance problem, notably hitches in your UI as you scroll (momentary hesitations that will prevent scrolling from happening smoothly).
If you see this (and presuming you can’t just request thumbnails from your backend, which is the best solution), you should resize your images to thumbnail size when you cache them. Or, if you will need the high resolution images later, have two caches, one for the full size images and another for the thumbnails.
Let’s say your image view is 50×50pt on a retina device with 3× scaling. So you will want to resize your downloaded image to 150×150px, and cache that.
If you use much larger assets for small image views, the device will have to continue to resize them on the fly, which, if the images are very large, is so computationally expensive that you will see the hitches in the scrolling behavior. If your images are just a little too big, resizing on the fly will probably not be a problem. But if you don’t have smooth scrolling and the assets are very big, resize them before caching.
For your issue where the previous image is showing when the cell is reused, you should override func prepareForReuse() in PhotoTableViewCell and set photoImageView.image = nil.
For your performance issue, it looks like you're making the API request off the main thread, so that's a good start. How large are the images you're requesting? I'm wondering if the data is so large that it's taking a lot of time to convert it to an image and then set the image on the image view
I need to load 100 images in cells. If I use this method in tableView cellForRowAt:
cell.cardImageView.image = UIImage(named: "\(indexPath.row + 1).jpg")
and start scrolling fast my tableView freezes.
I use this method to load the image data in background that fix freezes:
func loadImageAsync(imageName: String, completion: #escaping (UIImage) -> ()) {
DispatchQueue.global(qos: .userInteractive).async {
guard let image = UIImage(named: imageName) else {return}
DispatchQueue.main.async {
completion(image)
}
}
}
in tableView cellForRowAt call this:
loadImageAsync(imageName: "\(indexPath.row + 1).jpg") { (image) in
cell.cardImageView.image = image
}
But I have one bug may arise in this approach, such that while scrolling fast I may see old images for a while. How to fix this bug?
Your cells are being reused.
When cell goes out of screen it gets to internal UITableViews reuse pool, and when you dequeueReusableCell(withIdentifier:for:) in tableView(_:cellForRowAt:) you get this cell again (see, "reusable" in name). It is important to understand UITableViewCell's life cycle. UITableView does not hold 100 living UITableViewCells for 100 rows, that would kill performance and leave apps without memory pretty soon.
Why do you see old images in your cells?
Again, cells are being reused, they keep their old state after reuse, you'll need to reset the image, they won't reset it by themselves. You can do that when you configure a new cell or detect when the cell is about to be reused.
As simple as:
cell.cardImageView.image = nil // reset image
loadImageAsync(imageName: "\(indexPath.row + 1).jpg") { (image) in
cell.cardImageView.image = image
}
The other way is detecting reuse and resetting. In your cell subclass:
override func prepareForReuse() {
super.prepareForReuse()
self.cardImageView.image = nil // reset
}
Why do you see wrong images in your cells? By the time completion closure sets image into cardImageView, UITableViewCell has been reused (maybe, even, more than once). To prevent this you could test if you're setting image in the same cell, for example, store image name with your cell, and then:
// naive approach
let imageName = "\(indexPath.row + 1).jpg"
cell.imageName = imageName
loadImageAsync(imageName: imageName) { (image) in
guard cell.imageName == imageName else { return }
cell.cardImageView.image = image
}
There is a lot of stuff to take care of when designing lists, I won't be going into much detail here. I'd suggest to try the above approach and investigate the web on how to handle performance issues with lists.
in your cell class you need to declare
override func prepareForReuse() {
super.prepareForReuse()
}
to prepare the cell for the reuse
When I set images from a local array into each collection view cell, scrolling is laggy. This is because the full scaled UIImage is being used when the cell will be displayed.
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "PhotoCell", for: indexPath) as! PhotoCell
let image = images[indexPath.row]
cell.imageView.image = image
return cell
}
In order to try and solve this, I wrote a method that resizes images to their proper size at runtime.
private func resizeImages(images: [UIImage], size: CGSize) -> [UIImage?] {//...}
But resizing all the images in the array in viewDidLoad took a considerable amount of time.
This is a simple photo album app so I would prefer avoiding any use of activity or loading indicators. Given access to image data fetched from Core Data, how can I set the images in a collection view such that it won't lag while scrolling?
Instead of resizing images on runtime you should do this task at time of saving in CoreData. Instead of saving one image, you should store two images. One with full scale (high resolution) and other thumbnail (resized). Load only thumbnails in your CollectionViewCell to avoid scroll lagging.
I have used a LazyImageView (originally taken from cocoanetics.com) for networking which probably work without many changes in your case:
import UIKit
class LazyImageView: UIImageView {
var loading = false
weak var rawImage: UIImage?
deinit {
image = nil
loading = false
}
override func didMoveToSuperview() {
if !loading && image == nil{
loading = true
DispatchQueue.global().async {
self.resizeImage()
}
}
}
func resizeImage() {
let resizedImage: UIImage? = nil
// do the resizing
DispatchQueue.main.async {
self.image = resizedImage
self.loading = false
}
}
}
As you have asked for simple I would consider it done.
If you want to spend some more time, you could/should think about caching (i.e. to the file system's cache folder).
Depending on the app, maybe you have another nice UX way to give the user a hint what will happen (i.e. setting correct(?) placeholder color as a background for the image before loading).
Considering #Bilal answer to save a correct thumb version sound also well. It really depends on your app, i.e. if the user has a choice to resize the overall image size in the collection view (now or as a future feature).
Currently,
I have a feed for the user and
it uses uitableview and
there is a uicollectionview inside tableview for multi-images.
'Like' or 'Comment' functions are working well
but some issues happen when user taps 'Like'.
I do not want to show several changes,
but when user taps 'Like', I need to reload a cell and it shows another picture for a short time(bcs of reuse) and back to original image.
I tried to use the function, prepareForReuse().
However, I am not sure how to maintain the same image currently on the screen when they are reloading. Any idea u have?
For ur more information,
let me show my tableview's part of 'CellForItemAt' and collectionview's same method.
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "storyCell", for: indexPath) as! StoryPhotoCollectionViewCell
let imageURL = photoList[indexPath.row]
let url = URL(string: imageURL)
DispatchQueue.main.async {
cell.imageView.kf.setImage(with: url, placeholder: #imageLiteral(resourceName: "imageplaceholder"), options: nil, progressBlock: nil, completionHandler: nil)
}
cell.imageView.kf.indicatorType = .activity
return cell
}
The collectionView's datasource is photoList array, so in the tableview, I have this code.
DispatchQueue.main.async {
cell.photoList = (story.imageArray?.components(separatedBy: ",").sorted())!
}
The issue should be due to delay in asynchronous download of the image,
I believe your code would be like this
cell.image = downloadFromURL(SOME_URL)
Add this single line code before assigning the image
cell.image = nil; // or some placeholder image
cell.image = downloadFromURL(SOME_URL)
If possible please provide more info
If I understand well your question, you need:
When the status change, you change the image so, this image can be stored as part of the app or external. If it is the same image, you need to keep it cached.
You start a timer like:
let countTimeBeforeChangeMyImageBack = DispatchTime.now() + .seconds(waitTimeBeforeStartCounting)
DispatchQueue.main.asyncAfter(deadline: deadlineTime, execute: {
self.YourMethodToChangeYourImageBack
})
At your method YourMethodToChangeYourImageBack you set the original image back.
Here, remember you could need to join back to the main thread before updating the UI:
// Re join the main queue after the callback
DispatchQueue.main.sync() {
// Your code to update the image
}
Hope it Helps.
I have a tableview that I created with code (without storyboard):
class MSContentVerticalList: MSContent,UITableViewDelegate,UITableViewDataSource {
var tblView:UITableView!
var dataSource:[MSC_VCItem]=[]
init(Frame: CGRect,DataSource:[MSC_VCItem]) {
super.init(frame: Frame)
self.dataSource = DataSource
tblView = UITableView(frame: Frame, style: .Plain)
tblView.delegate = self
tblView.dataSource = self
self.addSubview(tblView)
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return dataSource.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = UITableViewCell(style: .Subtitle, reuseIdentifier: nil)
let record = dataSource[indexPath.row]
cell.textLabel!.text = record.Title
cell.imageView!.downloadFrom(link: record.Icon, contentMode: UIViewContentMode.ScaleAspectFit)
cell.imageView!.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
print(cell.imageView!.frame)
cell.detailTextLabel!.text = record.SubTitle
return cell
}
}
and in other class I have an extension method for download images Async:
extension UIImageView
{
func downloadFrom(link link:String?, contentMode mode: UIViewContentMode)
{
contentMode = mode
if link == nil
{
self.image = UIImage(named: "default")
return
}
if let url = NSURL(string: link!)
{
print("\nstart download: \(url.lastPathComponent!)")
NSURLSession.sharedSession().dataTaskWithURL(url, completionHandler: { (data, _, error) -> Void in
guard let data = data where error == nil else {
print("\nerror on download \(error)")
return
}
dispatch_async(dispatch_get_main_queue()) { () -> Void in
print("\ndownload completed \(url.lastPathComponent!)")
self.image = UIImage(data: data)
}
}).resume()
}
else
{
self.image = UIImage(named: "default")
}
}
}
I used this function in other places and worked correctly, Based on my logs I understand that images downloaded without problem (when the cell is rendered) and after download of image, The cell UI not updated.
Also I tried to use caching library like Haneke but problem is exist and not change.
Please help me to understand mistakes
Thanks
After setting the image you should call self.layoutSubviews()
edit: corrected from setNeedsLayout to layoutSubviews
The issue is that the .subtitle rendition of UITableViewCell will layout the cell as soon as cellForRowAtIndexPath returns (overriding your attempt to set the frame of the image view). Thus, if you are asynchronously retrieving the image, the cell will be re-laid out as if there was no image to show (because you're not initializing the image view's image property to anything), and when you update the imageView asynchronously later, the cell will have already been laid out in a manner such that you won't be able to see the image you downloaded.
There are a couple of solutions here:
You can have the download update the image to default not only when there is no URL, but also when there is a URL (so you'll first set it to the default image, and later update the image to the one that you downloaded from the network):
extension UIImageView {
func download(from url: URL, contentMode mode: UIView.ContentMode = .scaleAspectFill, placeholder: UIImage? = nil) {
contentMode = mode
image = placeholder
URLSession.shared.dataTask(with: url) { data, response, error in
guard let data = data, let response = response as? HTTPURLResponse, error == nil else {
print("error on download \(error ?? URLError(.badServerResponse))")
return
}
guard 200 ..< 300 ~= response.statusCode else {
print("statusCode != 2xx; \(response.statusCode)")
return
}
guard let image = UIImage(data: data) else {
print("not valid image")
return
}
DispatchQueue.main.async {
print("download completed \(url.lastPathComponent)")
self.image = image
}
}.resume()
}
}
This ensures that the cell will be laid out for the presence of an image, regardless, and thus the asynchronous updating of the image view will work (sort of: see below).
Rather than using the dynamically laid out .subtitle rendition of UITableViewCell, you can also create your own cell prototype which is laid out appropriately with a fixed size for the image view. That way, if there is no image immediately available, it won't reformat the cell as if there was no image available. This gives you complete control over the formatting of the cell using autolayout.
You can also define your downloadFrom method to take an additional third parameter, a closure that you'll call when the download is done. Then you can do a reloadRowsAtIndexPaths inside that closure. This assumes, though, that you fix this code to cache downloaded images (in a NSCache for example), so that you can check to see if you have a cached image before downloading again.
Having said that, as I alluded to above, there are some problems with this basic pattern:
If you scroll down and then scroll back up, you are going to re-retrieve the image from the network. You really want to cache the previously downloaded images before retrieving them again.
Ideally, your server's response headers are configured properly so that the built in NSURLCache will take care of this for you, but you'd have to test that. Alternatively, you might cache the images yourself in your own NSCache.
If you scroll down quickly to, say, the 100th row, you really don't want the visible cells backlogged behind image requests for the first 99 rows that are no longer visible. You really want to cancel requests for cells that scroll off screen. (Or use dequeueCellForRowAtIndexPath, where you re-use cells, and then you can write code to cancel the previous request.)
As mentioned above, you really want to do dequeueCellForRowAtIndexPath so that you don't have to unnecessarily instantiate UITableViewCell objects. You should be reusing them.
Personally, I might suggest that you (a) use dequeueCellForRowAtIndexPath, and then (b) marry this with one of the well established UIImageViewCell categories such as AlamofireImage, SDWebImage, DFImageManager or Kingfisher. To do the necessary caching and cancelation of prior requests is a non-trivial exercise, and using one of those UIImageView extensions will simplify your life. And if you're determined to do this yourself, you might want to still look at some of the code for those extensions, so you can pick-up ideas on how to do this properly.
--
For example, using AlamofireImage, you can:
Define a custom table view cell subclass:
class CustomCell : UITableViewCell {
#IBOutlet weak var customImageView: UIImageView!
#IBOutlet weak var customTitleLabel: UILabel!
#IBOutlet weak var customSubtitleLabel: UILabel!
}
Add a cell prototype to your table view storyboard, specifying (a) a base class of CustomCell; (b) a storyboard id of CustomCell; (c) add image view and two labels to your cell prototype, hooking up the #IBOutlets to your CustomCell subclass; and (d) add whatever constraints necessary to define the placement/size of the image view and two labels.
You can use autolayout constraints to define dimensions of the image view
Your cellForRowAtIndexPath, can then do something like:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomCell
let record = dataSource[indexPath.row]
cell.customTitleLabel.text = record.title
cell.customSubtitleLabel.text = record.subtitle
if let url = record.url {
cell.customImageView.af.setImage(withURL: url)
}
return cell
}
With that, you enjoy not only basic asynchronous image updating, but also image caching, prioritization of visible images because we're reusing dequeued cell, it's more efficient, etc. And by using a cell prototype with constraints and your custom table view cell subclass, everything is laid out correctly, saving you from manually adjusting the frame in code.
The process is largely the same regardless of which of these UIImageView extensions you use, but the goal is to get you out of the weeds of writing the extension yourself.
oh my god, the layoutSubviews is not recommended to use directly
the right way to solve the problem is call:
[self setNeedsLayout];
[self layoutIfNeeded];
here, the two way have to call together.
try this, have a good luck.
Create your own cell by subclassing UITableViewCell. The style .Subtitle, which you are using, has no image view, even if the property is available. Only the style UITableViewCellStyleDefault has an image view.
Prefer SDWebImages library here is the link
it will download image async and cache the image also
and very easy to integrate into the project as well