Lazy Load Images in ios? - ios

Question

I am lazy loading some images in a table view
I followed the below tutorial
Lazy Load ios
This is the cell style which I want to display.
The problem is on the server side image is too big so the image view takes the full width and height of the image. Which results in an abrupt display of the table.
I cant reduce the size on the server. Isnt there any way with which I can set the image height and width for all images that are being lazy loaded.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *simpleTableIdentifier = #"videoCell1";
CellTableViewCell *cell =(CellTableViewCell *)[tableView1 dequeueReusableCellWithIdentifier:simpleTableIdentifier];
if (cell == nil) {
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:#"videoCell" owner:self options:nil];
cell = [nib objectAtIndex:0];
}
cell.videoNameLabel.text = [videoTitle objectAtIndex:indexPath.row];
cell.videoImage.contentMode = UIViewContentModeScaleAspectFill;
[cell.videoImage sd_setImageWithURL:[NSURL URLWithString:[videoImage objectAtIndex:indexPath.row]]
placeholderImage:[UIImage imageNamed:#"placeholder.png"]];
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 200;
}
Plus on scrolling the table view it also disrupts. How do I solve the issue? Any suggestions.

Answer 1

I would recommend looking at PHImageManager
Example code in swift
var assets: [PHAsset]
var imageRequests: [NSIndexPath: PHImageRequestID]
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as UITableViewCell
let manager = PHImageManager.defaultManager()
if let request = imageRequests[indexPath] {
manager.cancelImageRequest(request)
}
let asset = assets[indexPath.row]
cell.textLabel?.text = NSDateFormatter.localizedStringFromDate(asset.creationDate, dateStyle: .MediumStyle, timeStyle: .MediumStyle)
imageRequests[indexPath] = manager.requestImageForAsset(asset, targetSize: CGSize(width: 100.0, height: 100.0), contentMode: .AspectFill, options: nil) { (result, _) in
cell.imageView?.image = result
}
return cell
}

Answer 2

The cell reusing is not properly implemented.
Add this code:
- (void)viewDidLoad
{
[super viewDidload];
[self.tableView registerNib:[UINib nibWithNibName:#"videoCell" bundle:nil]
forCellReuseIdentifier:#"videoCell1"];
}
And remove this code
if (cell == nil) {
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:#"videoCell" owner:self options:nil];
cell = [nib objectAtIndex:0];
}

Answer 3

Before saving the image in your _diskCachePath, resize the image and then save. When you scroll the table view it will load smaller size images and it looks smooth scrolling.
For resizing the image use the following method. This will maintains the aspect ratio when resizing the image.
-(UIImage*) imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize{
CGFloat width = image.size.width;
CGFloat height = image.size.height;
if ((width/newSize.width) > (height/newSize.height)) {
if (width < newSize.width) {
newSize.width = width;
}
newSize.height = height*(newSize.width/width);
}
else if ((width/newSize.width) < (height/newSize.height)) {
if (height < newSize.height) {
newSize.height = height;
}
newSize.width = width*(newSize.height/height);
}
else if(newSize.width > width && newSize.height > height){
newSize.height = height;
newSize.width = width;
}
UIGraphicsBeginImageContext( newSize );
[image drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}