自定义表格视图中的图像未按正确顺序显示

Question

i have an app that loads images in array from database after i do the array i generate a new array for the thumbnail images from the images array, i use sql to get the data sorted from the db, when the app loads up and i log the images and the thumbnail array both are sorted ok, the problem is that the thumbnail images in the tableview are not sorted in the same order of the thumbnail array.

here is my code

php code for getting the data sorted :

$result = mysql_query("SELECT * FROM $tableName WHERE user = '$u' ORDER BY id DESC");

then the xcode code

- (void)viewDidLoad {
    username = [savedStock objectForKey:@"username"];

    //========Load The Array From Server=============\\

    NSString *strURL = [NSString stringWithFormat:@"%@Load.php?username=%@", siteHost,username];

    NSData *dataURL = [NSData dataWithContentsOfURL:[NSURL URLWithString:strURL]];

    // to receive the returend value
    NSString *strResult = [[NSString alloc] initWithData:dataURL encoding:NSUTF8StringEncoding];

    tempArray = [strResult componentsSeparatedByString:@"+-+"];

    NSString *tempURL = [tempArray objectAtIndex:0];
    NSString *tempDEC = [tempArray objectAtIndex:1];
    NSString *tempTIME = [tempArray objectAtIndex:2];
    NSString *tempDATE = [tempArray objectAtIndex:3];

    tempArrayURL = [tempURL componentsSeparatedByString:@"/u/"];
    array = [[NSMutableArray alloc] initWithArray:tempArrayURL];

    tempArrayTime = [tempTIME componentsSeparatedByString:@"/t/"];
    arrayTime = [[NSMutableArray alloc] initWithArray:tempArrayTime];

    tempArrayDate = [tempDATE componentsSeparatedByString:@"/d/"];
    arrayDate = [[NSMutableArray alloc] initWithArray:tempArrayDate];

    tempArrayDesc = [tempDEC componentsSeparatedByString:@"/r/"];
    arrayDesc = [[NSMutableArray alloc] initWithArray:tempArrayDesc];

    number = [array count] - 1;

    arrayThumbs = [[NSMutableArray alloc] init];

    for (int i = 0; i<number; i++) {
        NSString *tempString = [array objectAtIndex:i];
        NSString *lastURl = [tempString substringFromIndex:[tempString length]-14];
        NSString *thumb = [lastURl substringToIndex:[lastURl length]-4];
        NSString *newLast = [thumb stringByAppendingString:@"_thumb.jpg"];
        NSString *firstURL = [tempString substringToIndex:[tempString length]-14];
        NSString *addOne = [firstURL stringByAppendingString:@"thumb/"];
        NSString *newURL = [addOne stringByAppendingString:newLast];
        [arrayThumbs addObject:newURL];
    }

    [arrayThumbs addObject:@""];

    NSLog(@"%@",array);
    NSLog(@"%@",arrayThumbs);
 }

loading everything in the table view :

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @"CustomCell";

CustomCell *cell = (CustomCell *) [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil) {
    NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil];
    for (id currentObject in topLevelObjects) {
        if ([currentObject isKindOfClass:[CustomCell class]]) {
            cell = (CustomCell *) currentObject;
            break;
        }
    }        

    //using the code here to load the thumbnail images misses up the order but everything else is ok
    NSString *tempString = [arrayThumbs objectAtIndex:indexPath.row];
    NSURL *imageURL = [NSURL URLWithString:tempString];
    NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
    UIImage *image = [UIImage imageWithData:imageData];
    cell.img.image = image;

}

UIImage *cellImage = [UIImage imageNamed:@"CustomCell.png"];
UIImageView *cellBackgroundImage = [[UIImageView alloc]initWithImage:cellImage];
cell.backgroundView = cellBackgroundImage;

cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"CustomCellSelected.png"]];

//using it here will load the thumbnail perfectly but the tableview freeze when i scroll

//    NSString *tempString = [arrayThumbs objectAtIndex:indexPath.row];
//    NSURL *imageURL = [NSURL URLWithString:tempString];
//    NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
//    UIImage *image = [UIImage imageWithData:imageData];
//    cell.img.image = image;

cell.URL.text = [array objectAtIndex:indexPath.row];
cell.Time.text = [arrayTime objectAtIndex:indexPath.row];    
cell.Date.text = [arrayDate objectAtIndex:indexPath.row];
cell.Des.text = [arrayDesc objectAtIndex:indexPath.row];

cell.URL.textColor = [UIColor whiteColor];
cell.Time.textColor = [UIColor whiteColor];
cell.Date.textColor = [UIColor whiteColor];
cell.Des.textColor = [UIColor whiteColor];

return cell;
}

**notice that when i change the thumbnail images code place it works fine but freeze the tableview when scrolling

and this is the log for both arrays

2013-08-16 07:04:29.367 img[12575:c07] (
"http://localhost/img/i/YzrLnuCFmR.jpg",
"http://localhost/img/i/43BXPwhEqg.jpg",
"http://localhost/img/i/qEuPrbSBfX.jpg",
"http://localhost/img/i/ZDs0q5aoSx.jpg",
"http://localhost/img/i/EbfO8a9gn5.jpg",
"http://localhost/img/i/oaSzbYdmQM.jpg",
"http://localhost/img/i/dD5sZYltqV.jpg",
"http://localhost/img/i/RBLZbcN0Cd.jpg",
""
)
2013-08-16 07:04:29.367 img[12575:c07] (
    "http://localhost/img/i/thumb/YzrLnuCFmR_thumb.jpg",
    "http://localhost/img/i/thumb/43BXPwhEqg_thumb.jpg",
    "http://localhost/img/i/thumb/qEuPrbSBfX_thumb.jpg",
    "http://localhost/img/i/thumb/ZDs0q5aoSx_thumb.jpg",
    "http://localhost/img/i/thumb/EbfO8a9gn5_thumb.jpg",
    "http://localhost/img/i/thumb/oaSzbYdmQM_thumb.jpg",
    "http://localhost/img/i/thumb/dD5sZYltqV_thumb.jpg",
    "http://localhost/img/i/thumb/RBLZbcN0Cd_thumb.jpg",
    ""
)

any idea what to do ? :)

Answer 1

I would suggest you to use SDWebImage Framework for lazy loading images in table view.

SDWebImage is an Asynchronous image downloader with cache support with an UIImageView category.

This library provides a category for UIImageVIew with support for remote images coming from the server.

Sample Code

[cell.imageView setImageWithURL:[NSURL URLWithString:@"http://www.domain.com/path/to/image.jpg"]
                   placeholderImage:[UIImage imageNamed:@"placeholder.png"]];

Here you can provide a placeholder image which will be displayed until the server image is ready to be displayed.

The issue you are facing is because you have kept the image loading code in if condition which is why you are getting the weird issue.

if (cell == nil) { ... } The if condition is only true if no cell could be reused . And you definitely want to reuse your cells. So configure them when you have a valid cell.