如何在 UICollectionview 中显示前 9 张图像？

Posted 2023-03-08

【中文标题】如何在 UICollectionview 中显示前 9 张图像？

【英文标题】：How to Display first 9 images in UICollectionview?

【发布时间】：2013-08-12 06:15:20

【问题描述】：

我有一个包含 50 个图像 url 的图像 url plist。我试图在 UICollectionview 中显示它，但它变得太慢了。我一次显示 9 个单元格（图像），如 3x3（3 行和 3 列） .如何在加载时显示前 9 张图像，在下一次滚动时显示下 9 张图像 .？这可能吗？我尝试使用 SDWebImages 加载图像，它不适合我。请帮助我。

code INSIDE collectionView cellForItemAtIndexPath: () 注释中的代码需要大量时间来加载图像，该代码用于从文档目录加载图像，如果图像不存在，那么我将显示在一个占位符图像中

    cell = nil;

    cell = (GMMCollectionViewCell *)[self.collectionView dequeueReusableCellWithReuseIdentifier:@"test" forIndexPath:indexPath];

    cell.tag = indexPath.row;
     docPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex:0];



    NSString *path;
    BOOL isImageLoaded = YES;

//////////////////问题代码：加载图像的时间过长////////////// //////

  bookImage = [UIImage imageWithContentsOfFile:[NSString stringWithFormat:@"%@/%@", docPath, [[allbooksImage objectAtIndex:indexPath.row] lastPathComponent]]];

/////////////////////////////////////// //////////////////////////////

    if(bookImage == nil)
        isImageLoaded = NO;
    
    if(!isImageLoaded)
        [[cell grid_image] setImage:[UIImage imageNamed:@"App-icon-144x144.png"]];
    else

       [[cell grid_image] setImage:bookImage];





    

    sharedManager.bookID=bookId;

return cell;

这是我所期待的

但是我越来越像这样了， 应用程序加载时间没有任何滚动（第一张图片：3列是空的）

第一次滚动后的应用屏幕（第二张图片：最后一列显示 2 张图片，其余部分仍为空）

长时间滚动后的应用程序屏幕（第三张图片：最后一列有一些图片，其余列仍然是空的）

应用屏幕再次滚动到顶部，所以第一张图片改变了

【问题讨论】：

SDWebImage 究竟如何不适合您？显示您的代码。

这些图片是你自己下载的吗？

是的，请检查我更新的下载图像问题

为什么要使用“等待 5 秒”？

下载部分工作正常..但加载部分花费了太多时间

【参考方案1】：

你可以试试下面的代码

[[cell grid_image] setImage:nil];

dispatch_queue_t concurrentQueue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);

dispatch_async(concurrentQueue, ^
    bookImage = [UIImage imageWithContentsOfFile:[NSString stringWithFormat:@"%@/%@", docPath, [[allbooksImage objectAtIndex:indexPath.row] lastPathComponent]]];
    dispatch_async(dispatch_get_main_queue(), ^
        if (bookImage)
        
            [[cell grid_image] setImage:bookImage];
        
        else
        
            [[cell grid_image] setImage:[UIImage imageNamed:@"App-icon-144x144.png"]];
        
    );

);

希望它对你有用。

【讨论】：

它工作正常，但为什么要在多个地方加载相同的图像？

@Navi 我已经修改了我的答案，现在检查一次。

第一个创建队列，第二个向创建的队列添加操作，第三个更新 UI，因为 UI 必须从主线程更新。所以第三个我们将返回主线程来更新 UI。

好的，谢谢你的回答，但这里只有我的第三列图像是随机出现的，每次滚动图像都会过度书写，所以我可以看到一张图像变成了几张图像

我需要 3 x 3 网格视图。这里只有最后一列。