Saving images from web server to phone for image slider - ios

Question

I have an app where it pulls urls of images from a database and stores it in coredata. Then in my app view, there's a scrollview of imageviews, basically I'm trying to do an image slider. These images tend to get updated so it needs to load from the server. I load the image urls from the coredata, download them to uiimages and load them in my view. Problem is, it's really slow as I'm doing it at runtime.
I was wondering what's the best way to go about this. I was thinking of loading all the images to the phone first when the app launches? I tried looking for some sample code to point me to the right direction but I can only find code that saves images to the phone's camera roll and not to the app itself. Anyone could help pls? Thanks!

Answer 1

Here's a method that takes a UIImage, a target path (the directory you want to save the image to) and the filename for the image, and saves the image as a PNG file:
-(BOOL) saveImage:(UIImage *)image savePath:(NSString *)savePath filename:(NSString *)filename{
savePath = [savePath stringByAppendingPathComponent:filename];
NSData *sourceData = UIImagePNGRepresentation(image);
return [sourceData writeToFile:savePath atomically:YES];
}
You will need to store the image in the right location within the app's sandbox. For example, don't put them in the Documents folder as it may be rejected by Apple since you can recreate (or re-download) the images. You likely want to put them in the Library/Caches folder, and be prepared to re-download them if they are removed. See the iOS File System Programming Guide for details on this.
I would be concerned about downloading all the files at app start, since it will look like the app has frozen if it non-responsive while download a number of image files. You can download the images in the background and update the UI as the images finish downloading.
One method to do this would be to check if the image has already been downloaded (e.g., is it in the Library/Caches folder). If it is, then use it, otherwise use a placeholder image until the image is downloaded. For example:
if (isImageAvailable) {
displayedImageView.image = cachedImage;
} else {
displayedImageView.image = placeholderImage;
[self getImageAtURL:imageURL andThenDo:^(UIImage *image) {
// Replace placeholder image with downloaded image
displayedImageView.image = image;
}];
}
Replace isImageAvailable with a method that checks for the existence of the image file in the Library/Caches folder. displayedImageView is the UIImageView you are displaying the image with.
The getImageAtURL method would look something like:
-(void)getImageAtURL:(NSURL *)url andThenDo:(void(^)(UIImage *image))completionBlock{
// Run on background thread
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
UIImage *image;
// Insert code to download image...
// Switch to main (UI) thread to allow updating the UI
dispatch_sync(dispatch_get_main_queue(), ^{
completionBlock(image);
});
});
}

Answer 2

You might not need to download images to your application, I can suggest better you use image url it self to load images from server it self.
To load images from server u may use following:
UIImage* yourImageview = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:your.image_url]]];
Downloading all images will also slow down your app.