Showing small image while main image is being loaded

[kinjaldua]

Hi,

Is it possible to show a small image of the main image which is being loaded in the background to be showed on the image view instead of showing the spinner?

I tried this by getting the small thumbnail from the document directory and showing it - in DisplayImage method I commented out the line to start animating the spinner and added the method to fetch and show small image. But I got stuck in issues like the small thumbnail not changing on its own to the actual image after it has been loaded. Sometimes it doesnt show the actual image at all even after scrolling.

[P.S : This small thumbnail is of the actual image and it is already stored in the document directory earlier for other features of the app ]

Heres my code

ZoomingScrollView class // Get and display image

• (void)displayImage { if (index != NSNotFound && photoImageView.image == nil) {

  // Reset
  self.maximumZoomScale = 1;
  self.minimumZoomScale = 1;
  self.zoomScale = 1;
  self.contentSize = CGSizeMake(0, 0);
  
  // Get image
  UIImage *img = [self.photoBrowser imageAtIndex:index];
  if (img) {
  
    // Hide spinner
    [spinner stopAnimating];
  
    // Set image
    photoImageView.image = img;
    photoImageView.hidden = NO;
  
    // Setup photo frame
    CGRect photoImageViewFrame;
    photoImageViewFrame.origin = CGPointZero;
    photoImageViewFrame.size = img.size;
    photoImageView.frame = photoImageViewFrame;
    self.contentSize = photoImageViewFrame.size;
  
    // Set zoom to minimum zoom
    [self setMaxMinZoomScalesForCurrentBounds];
  
  } else {
  
    // Hide image view
  
  if ([[NSUserDefaults standardUserDefaults] integerForKey:@"PREVIEWTHUMBNAILKEY"] == 0 &&[[NSUserDefaults standardUserDefaults] integerForKey:@"RESOLUTIONSCALE"] == 1 )
  {
  //    MWPhotoBrowser *temp = [[MWPhotoBrowser alloc]init];
    dispatch_async(dispatch_get_global_queue(0, 0), ^
                   {   UIImage *img =[self.photoBrowser backgroundimageAtIndex:index];
                       photoImageView.image = img;
                       photoImageView.hidden = NO;
  
                   });
  
  //  [temp release];
  }
  else
  {
    photoImageView.hidden = YES;
    [spinner startAnimating];
  
  }

  } [self setNeedsLayout]; } }

//method to fetch the selected image in MWPhotoBrowser.m class

• (UIImage )backgroundimageAtIndex:(NSUInteger)index { //NSLog(@"this is called the start point"); if (photos && index < photos.count) { [self.view setUserInteractionEnabled:NO]; // Get image or obtain in background MWPhoto photo = [photos objectAtIndex:index]; return [photo obtainBackgroundImage];

  } return nil; }

//Method to fetch small thumbnail of the image in MWPhoto.m clas -(UIImage )obtainBackgroundImage { UIImage img = nil; NSArray strComponents = [photoPath componentsSeparatedByString:@".jpg"]; NSString imgNumber = [strComponents objectAtIndex:0]; NSArray paths = NSSearchPathForDirectoriesInDomains(NSLibraryDirectory, NSUserDomainMask, YES); NSString *libDir = (NSString)[paths objectAtIndex:0]; NSString *compressedFilePath = [libDir stringByAppendingPathComponent:[NSString stringWithFormat:@"%@_thumb.jpg",imgNumber]]; if([[NSFileManager defaultManager] fileExistsAtPath:compressedFilePath]) { img = [UIImage imageWithContentsOfFile:compressedFilePath]; } return img; }

Ive done it just like you're getting the photo and showing it. I hope you are able to understand my issue. Any help/suggestion is highly appreciated. Thanks in advance!

[mwaterfall]

This is a great idea and something I'm going to look into!

[mwaterfall]

While I like this idea, I think it would be difficult to do it right because people's thumbnails may be of all shapes and sizes. Ideally to make this work, I'd need a non-cropped, lower-res image of the exact same aspect ratio as the original, and I'd need to know the dimensions of the original image. If I have all those things then it would work great; a low res image will be in place and when the original image loads it can be seamlessly faded-in and it would look nice. If I don't have all of the above info / thumbnail image then it won't really be a great user experience, the thumbnail would be sized and positioned different, and the original image will come in and it would look strange.

I'd welcome ideas though!

[atljeremy]

I had to add this feature to the previous version of MWPhotoBrowser (before the recent update with iOS 7 enhancements). It worked Ok, but it did do exactly what you are saying @mwaterfall. For the most part the thumbnails were large enough to at least fill the screen. however, in the event that one wasn't, it was obvious because it wouldn't fill the screen. When the full image loaded and was displayed it wasn't a graceful transition. I have plans to re-implement this into the project and improve this by utilizing a UIImage category I have to re-size and image (really quickly) to fill the screen bounds if the thumbnail image isn't large enough do to so as is. I'll send you a PR when I get around to it so you can check it out.

[wdcurry]

..any movement in this area?

[bufu2014]

super super interested in this idea. Any recent update in this area?!

[gclsoft]

I need this too. Show small image first until the big image is loaded.

[fernandodev]

With PR #479 you can achieve that @kinjaldua and @gclsoft