Saya telah menulis dua cara untuk memuat gambar di dalam sel UITableView saya. Dalam kedua kasus gambar akan memuat dengan baik tetapi ketika saya akan menggulir tabel gambar akan berubah beberapa kali sampai gulir akan berakhir dan gambar akan kembali ke gambar yang tepat. Saya tidak tahu mengapa ini terjadi.

#define kBgQueue dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0)

- (void)viewDidLoad
{
    [super viewDidLoad];
    dispatch_async(kBgQueue, ^{
        NSData* data = [NSData dataWithContentsOfURL: [NSURL URLWithString:
                                                       @"http://myurl.com/getMovies.php"]];
        [self performSelectorOnMainThread:@selector(fetchedData:)
                               withObject:data waitUntilDone:YES];
    });
}

-(void)fetchedData:(NSData *)data
{
    NSError* error;
    myJson = [NSJSONSerialization
              JSONObjectWithData:data
              options:kNilOptions
              error:&error];
    [_myTableView reloadData];
}    

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    // Return the number of sections.
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    // Return the number of rows in the section.
    // Usually the number of items in your array (the one that holds your list)
    NSLog(@"myJson count: %d",[myJson count]);
    return [myJson count];
}
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

        myCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
        if (cell == nil) {
            cell = [[myCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
        }

        dispatch_async(kBgQueue, ^{
        NSData *imgData = [NSData dataWithContentsOfURL:[NSURL URLWithString:[NSString stringWithFormat:@"http://myurl.com/%@.jpg",[[myJson objectAtIndex:indexPath.row] objectForKey:@"movieId"]]]];

            dispatch_async(dispatch_get_main_queue(), ^{
        cell.poster.image = [UIImage imageWithData:imgData];
            });
        });
         return cell;
}

... ...

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

            myCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
            if (cell == nil) {
                cell = [[myCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
            }
    NSURL* url = [NSURL URLWithString:[NSString stringWithFormat:@"http://myurl.com/%@.jpg",[[myJson objectAtIndex:indexPath.row] objectForKey:@"movieId"]]];
    NSURLRequest* request = [NSURLRequest requestWithURL:url];


    [NSURLConnection sendAsynchronousRequest:request
                                       queue:[NSOperationQueue mainQueue]
                           completionHandler:^(NSURLResponse * response,
                                               NSData * data,
                                               NSError * error) {
                               if (!error){
                                   cell.poster.image = [UIImage imageWithData:data];
                                   // do whatever you want with image
                               }

                           }];
     return cell;
}

Dengan asumsi Anda sedang mencari perbaikan taktis cepat, apa yang perlu Anda lakukan adalah memastikan gambar sel diinisialisasi dan juga bahwa baris sel masih terlihat, misalnya:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    MyCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];

    cell.poster.image = nil; // or cell.poster.image = [UIImage imageNamed:@"placeholder.png"];

    NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:@"http://myurl.com/%@.jpg", self.myJson[indexPath.row][@"movieId"]]];

    NSURLSessionTask *task = [[NSURLSession sharedSession] dataTaskWithURL:url completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
        if (data) {
            UIImage *image = [UIImage imageWithData:data];
            if (image) {
                dispatch_async(dispatch_get_main_queue(), ^{
                    MyCell *updateCell = (id)[tableView cellForRowAtIndexPath:indexPath];
                    if (updateCell)
                        updateCell.poster.image = image;
                });
            }
        }
    }];
    [task resume];

    return cell;
}

Kode di atas mengatasi beberapa masalah yang berasal dari fakta bahwa sel digunakan kembali:

1. Anda tidak menginisialisasi gambar sel sebelum memulai permintaan latar belakang (artinya gambar terakhir untuk sel yang dikosongkan masih akan terlihat saat gambar baru sedang diunduh). Pastikan untuk nilmelihat imageproperti gambar atau Anda akan melihat kerlipan gambar.

2. Masalah yang lebih halus adalah bahwa pada jaringan yang sangat lambat, permintaan asinkron Anda mungkin tidak selesai sebelum sel bergulir dari layar. Anda dapat menggunakan UITableViewmetode ini cellForRowAtIndexPath:(jangan bingung dengan UITableViewDataSourcemetode yang disebut sama tableView:cellForRowAtIndexPath:) untuk melihat apakah sel untuk baris itu masih terlihat. Metode ini akan kembali niljika sel tidak terlihat.

   Masalahnya adalah bahwa sel telah digulirkan pada saat metode async Anda telah selesai, dan, lebih buruk lagi, sel telah digunakan kembali untuk baris lain dari tabel. Dengan memeriksa untuk melihat apakah baris masih terlihat, Anda akan memastikan bahwa Anda tidak secara tidak sengaja memperbarui gambar dengan gambar untuk baris yang sejak saat itu bergulir dari layar.

3. Agak tidak terkait dengan pertanyaan yang ada, saya masih merasa terdorong untuk memperbarui ini untuk meningkatkan konvensi dan API modern, terutama:

   • Gunakan NSURLSessiondaripada mengirim -[NSData contentsOfURL:]ke antrian latar belakang;

   • Gunakan dequeueReusableCellWithIdentifier:forIndexPath:daripada dequeueReusableCellWithIdentifier:(tetapi pastikan untuk menggunakan prototipe sel atau kelas register atau NIB untuk pengidentifikasi itu); dan

   • Saya menggunakan nama kelas yang sesuai dengan konvensi penamaan Kakao (yaitu mulai dengan huruf besar).

Bahkan dengan koreksi ini, ada masalah:

1. Kode di atas bukanlah caching gambar yang diunduh. Itu berarti bahwa jika Anda menggulir gambar dari layar dan kembali ke layar, aplikasi mungkin mencoba untuk mengambil gambar lagi. Mungkin Anda akan cukup beruntung bahwa header respons server Anda akan mengizinkan caching yang cukup transparan yang ditawarkan oleh NSURLSessiondan NSURLCache, tetapi jika tidak, Anda akan membuat permintaan server yang tidak perlu dan menawarkan UX yang jauh lebih lambat.

2. Kami tidak membatalkan permintaan sel yang menggulir layar. Jadi, jika Anda dengan cepat menggulir ke baris ke-100, gambar untuk baris itu bisa ditumpuk di belakang permintaan 99 baris sebelumnya yang bahkan tidak terlihat lagi. Anda selalu ingin memastikan Anda memprioritaskan permintaan sel yang terlihat untuk UX terbaik.

Perbaikan paling sederhana yang mengatasi masalah ini adalah dengan menggunakan UIImageViewkategori, seperti yang disediakan dengan SDWebImage atau AFNetworking . Jika mau, Anda dapat menulis kode sendiri untuk mengatasi masalah di atas, tetapi ini banyak pekerjaan, dan UIImageViewkategori di atas sudah melakukan ini untuk Anda.

/ * Saya telah melakukannya dengan cara ini, dan juga mengujinya * /

Langkah 1 = Daftarkan kelas sel khusus (dalam kasus sel prototipe dalam tabel) atau nib (dalam kasus nib khusus untuk sel khusus) untuk tabel seperti ini dalam metode viewDidLoad:

[self.yourTableView registerClass:[CustomTableViewCell class] forCellReuseIdentifier:@"CustomCell"];

ATAU

[self.yourTableView registerNib:[UINib nibWithNibName:@"CustomTableViewCell" bundle:nil] forCellReuseIdentifier:@"CustomCell"];

Langkah 2 = Gunakan metode "dequeueReusableCellWithIdentifier UITableView: forIndexPath:" seperti ini (untuk ini, Anda harus mendaftar kelas atau nib):

   - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
            CustomTableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:@"CustomCell" forIndexPath:indexPath];

            cell.imageViewCustom.image = nil; // [UIImage imageNamed:@"default.png"];
            cell.textLabelCustom.text = @"Hello";

            dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
                // retrive image on global queue
                UIImage * img = [UIImage imageWithData:[NSData dataWithContentsOfURL:     [NSURL URLWithString:kImgLink]]];

                dispatch_async(dispatch_get_main_queue(), ^{

                    CustomTableViewCell * cell = (CustomTableViewCell *)[tableView cellForRowAtIndexPath:indexPath];
                  // assign cell image on main thread
                    cell.imageViewCustom.image = img;
                });
            });

            return cell;
        }

Ada beberapa kerangka kerja yang mengatasi masalah ini. Hanya untuk beberapa nama:

Cepat:

• Nuke (milikku)
• Burung pekakak
• Gambar Alamofire
• HanekeSwift

Tujuan-C:

• AFNetworking
• PINRemoteImage
• YYWebImage
• SDWebImage

Cepat 3

Saya menulis implementasi cahaya saya sendiri untuk pemuat gambar dengan menggunakan NSCache. Tidak ada gambar sel yang berkedip!

ImageCacheLoader.swift

typealias ImageCacheLoaderCompletionHandler = ((UIImage) -> ())

class ImageCacheLoader {
    
    var task: URLSessionDownloadTask!
    var session: URLSession!
    var cache: NSCache<NSString, UIImage>!
    
    init() {
        session = URLSession.shared
        task = URLSessionDownloadTask()
        self.cache = NSCache()
    }
    
    func obtainImageWithPath(imagePath: String, completionHandler: @escaping ImageCacheLoaderCompletionHandler) {
        if let image = self.cache.object(forKey: imagePath as NSString) {
            DispatchQueue.main.async {
                completionHandler(image)
            }
        } else {
            /* You need placeholder image in your assets, 
               if you want to display a placeholder to user */
            let placeholder = #imageLiteral(resourceName: "placeholder")
            DispatchQueue.main.async {
                completionHandler(placeholder)
            }
            let url: URL! = URL(string: imagePath)
            task = session.downloadTask(with: url, completionHandler: { (location, response, error) in
                if let data = try? Data(contentsOf: url) {
                    let img: UIImage! = UIImage(data: data)
                    self.cache.setObject(img, forKey: imagePath as NSString)
                    DispatchQueue.main.async {
                        completionHandler(img)
                    }
                }
            })
            task.resume()
        }
    }
}

Contoh penggunaan

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    
    let cell = tableView.dequeueReusableCell(withIdentifier: "Identifier")
    
    cell.title = "Cool title"

    imageLoader.obtainImageWithPath(imagePath: viewModel.image) { (image) in
        // Before assigning the image, check whether the current cell is visible
        if let updateCell = tableView.cellForRow(at: indexPath) {
            updateCell.imageView.image = image
        }
    }    
    return cell
}

Ini adalah versi cepat (dengan menggunakan kode obyektif C borad @Nitesh): -

   if let img: UIImage = UIImage(data: previewImg[indexPath.row]) {
                cell.cardPreview.image = img
            } else {
                // The image isn't cached, download the img data
                // We should perform this in a background thread
                let imgURL = NSURL(string: "webLink URL")
                let request: NSURLRequest = NSURLRequest(URL: imgURL!)
                let session = NSURLSession.sharedSession()
                let task = session.dataTaskWithRequest(request, completionHandler: {data, response, error -> Void in
                    let error = error
                    let data = data
                    if error == nil {
                        // Convert the downloaded data in to a UIImage object
                        let image = UIImage(data: data!)
                        // Store the image in to our cache
                        self.previewImg[indexPath.row] = data!
                        // Update the cell
                        dispatch_async(dispatch_get_main_queue(), {
                            if let cell: YourTableViewCell = tableView.cellForRowAtIndexPath(indexPath) as? YourTableViewCell {
                                cell.cardPreview.image = image
                            }
                        })
                    } else {
                        cell.cardPreview.image = UIImage(named: "defaultImage")
                    }
                })
                task.resume()
            }

Jawaban terbaik bukan cara yang benar untuk melakukan ini :(. Anda benar-benar terikat indexPath dengan model, yang tidak selalu baik. Bayangkan bahwa beberapa baris telah ditambahkan selama memuat gambar. Sekarang sel untuk indexPath yang diberikan ada di layar, tetapi gambar tidak lagi benar! Situasinya agak tidak mungkin dan sulit untuk ditiru tetapi itu mungkin.

Lebih baik menggunakan pendekatan MVVM, mengikat sel dengan viewModel di controller dan memuat gambar di viewModel (menetapkan sinyal ReactiveCocoa dengan metode switchToLatest), kemudian berlangganan sinyal ini dan tetapkan gambar ke sel! ;)

Anda harus ingat untuk tidak menyalahgunakan MVVM. Tampilan harus mati sederhana! Sedangkan ViewModels harus dapat digunakan kembali! Itu sebabnya sangat penting untuk mengikat View (UITableViewCell) dan ViewModel di controller.

Dalam kasus saya, itu bukan karena caching gambar (SDWebImage Digunakan). Itu karena ketidakcocokan tag sel kustom dengan indexPath.row.

Di cellForRowAtIndexPath:

1) Tetapkan nilai indeks ke sel khusus Anda. Misalnya,

cell.tag = indexPath.row

2) Pada utas utama, sebelum menetapkan gambar, periksa apakah gambar itu milik sel yang sesuai dengan mencocokkannya dengan tag.

dispatch_async(dispatch_get_main_queue(), ^{
   if(cell.tag == indexPath.row) {
     UIImage *tmpImage = [[UIImage alloc] initWithData:imgData];
     thumbnailImageView.image = tmpImage;
   }});
});

Terima kasih "Rob" .... Saya memiliki masalah yang sama dengan UICollectionView dan jawaban Anda membantu saya untuk menyelesaikan masalah saya. Ini kode saya:

 if ([Dict valueForKey:@"ImageURL"] != [NSNull null])
    {
        cell.coverImageView.image = nil;
        cell.coverImageView.imageURL=nil;

        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{

            if ([Dict valueForKey:@"ImageURL"] != [NSNull null] )
            {
                dispatch_async(dispatch_get_main_queue(), ^{

                    myCell *updateCell = (id)[collectionView cellForItemAtIndexPath:indexPath];

                    if (updateCell)
                    {
                        cell.coverImageView.image = nil;
                        cell.coverImageView.imageURL=nil;

                        cell.coverImageView.imageURL=[NSURL URLWithString:[Dict valueForKey:@"ImageURL"]];

                    }
                    else
                    {
                        cell.coverImageView.image = nil;
                        cell.coverImageView.imageURL=nil;
                    }


                });
            }
        });

    }
    else
    {
        cell.coverImageView.image=[UIImage imageNamed:@"default_cover.png"];
    }

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{
        MyCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];

        cell.poster.image = nil; // or cell.poster.image = [UIImage imageNamed:@"placeholder.png"];

        NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:@"http://myurl.com/%@.jpg", self.myJson[indexPath.row][@"movieId"]]];

        NSURLSessionTask *task = [[NSURLSession sharedSession] dataTaskWithURL:url completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
            if (data) {
                UIImage *image = [UIImage imageWithData:data];
                if (image) {
                    dispatch_async(dispatch_get_main_queue(), ^{
                        MyCell *updateCell = (id)[tableView cellForRowAtIndexPath:indexPath];
                        if (updateCell)
                            updateCell.poster.image = image;
                    });
                }
            }
        }];
        [task resume];

        return cell;
    }

Saya pikir Anda ingin mempercepat pemuatan sel Anda pada saat pemuatan gambar untuk sel di latar belakang. Untuk itu kami telah melakukan langkah-langkah berikut:

1. Memeriksa file yang ada di direktori dokumen atau tidak.

2. Jika tidak memuat gambar untuk pertama kalinya, dan menyimpannya ke direktori dokumen telepon kami. Jika Anda tidak ingin menyimpan gambar di telepon maka Anda dapat memuat gambar sel secara langsung di latar belakang.

3. Sekarang proses memuat:

Cukup sertakan: #import "ManabImageOperations.h"

Kode seperti di bawah ini untuk sel:

NSString *imagestr=[NSString stringWithFormat:@"http://www.yourlink.com/%@",[dictn objectForKey:@"member_image"]];

        NSString *docDir=[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)objectAtIndex:0];
        NSLog(@"Doc Dir: %@",docDir);

        NSString  *pngFilePath = [NSString stringWithFormat:@"%@/%@",docDir,[dictn objectForKey:@"member_image"]];

        BOOL fileExists = [[NSFileManager defaultManager] fileExistsAtPath:pngFilePath];
        if (fileExists)
        {
            [cell1.memberimage setImage:[UIImage imageWithContentsOfFile:pngFilePath] forState:UIControlStateNormal];
        }
        else
        {
            [ManabImageOperations processImageDataWithURLString:imagestr andBlock:^(NSData *imageData)
             {
                 [cell1.memberimage setImage:[[UIImage alloc]initWithData: imageData] forState:UIControlStateNormal];
                [imageData writeToFile:pngFilePath atomically:YES];
             }];
}

ManabImageOperations.h:

#import <Foundation/Foundation.h>

    @interface ManabImageOperations : NSObject
    {
    }
    + (void)processImageDataWithURLString:(NSString *)urlString andBlock:(void (^)(NSData *imageData))processImage;
    @end

ManabImageOperations.m:

#import "ManabImageOperations.h"
#import <QuartzCore/QuartzCore.h>
@implementation ManabImageOperations

+ (void)processImageDataWithURLString:(NSString *)urlString andBlock:(void (^)(NSData *imageData))processImage
{
    NSURL *url = [NSURL URLWithString:urlString];

    dispatch_queue_t callerQueue = dispatch_get_main_queue();
    dispatch_queue_t downloadQueue = dispatch_queue_create("com.myapp.processsmagequeue", NULL);
    dispatch_async(downloadQueue, ^{
        NSData * imageData = [NSData dataWithContentsOfURL:url];

        dispatch_async(callerQueue, ^{
            processImage(imageData);
        });
    });
  //  downloadQueue=nil;
    dispatch_release(downloadQueue);

}
@end

Silakan periksa jawaban dan komentar jika ada masalah ....

Cukup ubah,

dispatch_async(kBgQueue, ^{
     NSData *imgData = [NSData dataWithContentsOfURL:[NSURL URLWithString:   [NSString stringWithFormat:@"http://myurl.com/%@.jpg",[[myJson objectAtIndex:indexPath.row] objectForKey:@"movieId"]]]];
     dispatch_async(dispatch_get_main_queue(), ^{
        cell.poster.image = [UIImage imageWithData:imgData];
     });
 });

Ke

    dispatch_async(kBgQueue, ^{
         NSData *imgData = [NSData dataWithContentsOfURL:[NSURL URLWithString:   [NSString stringWithFormat:@"http://myurl.com/%@.jpg",[[myJson objectAtIndex:indexPath.row] objectForKey:@"movieId"]]]];
         cell.poster.image = [UIImage imageWithData:imgData];
         dispatch_async(dispatch_get_main_queue(), ^{
            [self.tableView reloadRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationNone];
         });
     });

Anda bisa meneruskan URL Anda,

NSURL *url = [NSURL URLWithString:@"http://www.myurl.com/1.png"];
NSURLSessionTask *task = [[NSURLSession sharedSession] dataTaskWithURL:url completionHandler:^(NSData * _Nullable data,    NSURLResponse * _Nullable response, NSError * _Nullable error) {
    if (data) {
        UIImage *image = [UIImage imageWithData:data];
        if (image) {
            dispatch_async(dispatch_get_main_queue(), ^{
                    yourimageview.image = image;
            });
        }
    }
}];
[task resume];

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    Static NSString *CellIdentifier = @"Cell";
    QTStaffViewCell *cell = (QTStaffViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    If (cell == nil)
    {

        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"QTStaffViewCell" owner:self options:nil];
        cell = [nib objectAtIndex: 0];

    }

    StaffData = [self.staffArray objectAtIndex:indexPath.row];
    NSString *title = StaffData.title;
    NSString *fName = StaffData.firstname;
    NSString *lName = StaffData.lastname;

    UIFont *FedSanDemi = [UIFont fontWithName:@"Aller" size:18];
    cell.drName.text = [NSString stringWithFormat:@"%@ %@ %@", title,fName,lName];
    [cell.drName setFont:FedSanDemi];

    UIFont *aller = [UIFont fontWithName:@"Aller" size:14];
    cell.drJob.text = StaffData.job;
    [cell.drJob setFont:aller];

    if ([StaffData.title isEqualToString:@"Dr"])
    {
        cell.drJob.frame = CGRectMake(83, 26, 227, 40);
    }
    else
    {
        cell.drJob.frame = CGRectMake(90, 26, 227, 40);

    }

    if ([StaffData.staffPhoto isKindOfClass:[NSString class]])
    {
        NSURL *url = [NSURL URLWithString:StaffData.staffPhoto];
        NSURLSession *session = [NSURLSession sharedSession];
        NSURLSessionDownloadTask *task = [session downloadTaskWithURL:url
                completionHandler:^(NSURL *location,NSURLResponse *response, NSError *error) {

      NSData *imageData = [NSData dataWithContentsOfURL:location];
      UIImage *image = [UIImage imageWithData:imageData];

      dispatch_sync(dispatch_get_main_queue(),
             ^{
                    cell.imageView.image = image;
              });
    }];
        [task resume];
    }
       return cell;}