ios開發(fā)UITableViewCell圖片加載優(yōu)化的方法

這篇“ios開發(fā)UITableViewCell圖片加載優(yōu)化的方法”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“ios開發(fā)UITableViewCell圖片加載優(yōu)化的方法”文章吧。

圖片自適應(yīng)比例

一般我們的做法都是用UITableViewAutomaticDimension來實現(xiàn)的。

以往的做法，我們都是直接 sd_setImageWithURL 來實現(xiàn)添加圖片，那現(xiàn)在也一樣，我們也是通過這個來獲取圖片寬和高。

- (void)sd_setImageWithURL:(nullable NSURL *)url
          placeholderImage:(nullable UIImage *)placeholder
                 completed:(nullable SDExternalCompletionBlock)completedBlock

完成后，我們可以拿到UIImage，從而知道圖片的 size 。然后我們就可以按比例來獲取圖片的高度，再通過更新約束來改變圖片高度。

大概做法如下：

[_imageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL _Nullable imageURL) {
            if (image) {
                // 獲取圖片寬高
                CGSize imageSize = image.size;
                CGFloat maxWidth = kSCREEN_WIDTH - 32;
                // 按比例獲取當前的高度
                CGFloat height = imageSize.height * maxWidth / imageSize.width;
                [self.imageView mas_updateConstraints:^(MASConstraintMaker *make) {
                    make.height.mas_equalTo(height);
                }];
            }
        }];

然后我們一運行代碼，發(fā)現(xiàn)圖片的高度并沒有展示我們想要的高度，可以說是連高度都沒有。

很明顯是圖片的高度沒有生效。想想也是，我們是異步調(diào)用加載圖片的，這時候等異步結(jié)果回來調(diào)用mas_updateConstraints，并不會觸發(fā)代理 heightForRowAtIndexPath，那怎么會更新高度呢。

既然是這樣，那我們就重新加載該列表吧。

[cell setHeightBlock:^(CGFloat imageHeight){
    [tableView beginUpdates];
    [tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
    [tableView endUpdates];
}];

我們更新完mas_updateConstraints后，這時候，直接刷新該列表，就可以解決問題了。

這時候我們重新運行，效果還可以，但在來回滾動的時候，發(fā)現(xiàn)有點卡。很明顯，我們滾動的時候每次都要重新刷新cell。

如果我們有緩存了，那就知道了圖片的高度，那我們是不是就不需要reloadRowsAtIndexPaths。

所以我再次進行優(yōu)化

// 是否有緩存
BOOL hasCache = [[SDImageCache sharedImageCache] diskImageDataExistsWithKey:model.urlStr];
[_ImageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
    if (image) {
        CGSize imageSize = image.size;
        CGFloat maxWidth = kSCREEN_WIDTH - 32;
        CGFloat height = imageSize.height * maxWidth / imageSize.width;
        [self.imageView mas_updateConstraints:^(MASConstraintMaker *make) {
            make.height.mas_equalTo(height);
        }];
         // 有緩存就不去reloadRowsAtIndexPaths
         if (!hasCache && self.heightBlock) {
             self.heightBlock(height);
         }
    }
}];

如果發(fā)現(xiàn)是有緩存圖片了，我們就不刷新列表了。sd_setImageWithURL這時候也是從緩存里面讀取圖片，就不是異步加載了，所以不用再次刷新了當前cell了。

XHWebImageAutoSize

有的人說，這么寫好像挺麻煩的，有沒有封裝好的寫法，的確有的。

那就是第三方庫 XHWebImageAutoSize，它的寫法其實也是用了 SDWebImage 來進行優(yōu)化操作的。

[_imageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
    if (image) {
        /** 緩存image size */
        [XHWebImageAutoSize storeImageSize:image forURL:imageURL completed:^(BOOL result) {
            /** reload  */
            if(result && self.heightBlock) {
                self.heightBlock(0)
            }
        ];
    }
}];

緩存圖片后，一樣是去刷新cell。

[cell setHeightBlock:^(CGFloat imageHeight) {
    [tableView xh_reloadDataForURL:[NSURL URLWithString:model.urlStr]];
 }];

然后就是重新加載高度。

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    ImageModel *model = _dataArray[indexPath.row];
    return [XHWebImageAutoSize imageHeightForURL:[NSURL URLWithString:model.urlStr] layoutWidth:[UIScreen mainScreen].bounds.size.width-32 estimateHeight:200] + 50;
}

后面加的 50是其他的高度，例如cell里面還有title，就是圖片+其他高度。

這樣也能實現(xiàn)圖片自適應(yīng)高度。

僅加載當前屏幕的內(nèi)容

圖片列表實在太多了，一直滑滑滑，圖片加載速度跟不上手速啊，感覺有點卡，我們可以僅加載當前屏幕的內(nèi)容。滑動的時候，我們不加載，等列表停后，我們再次加載當前屏幕的內(nèi)容。

這時候我們在模型model里面，添加一個isLoad的參數(shù)，如果是true，我們才加載。

先添加一個當前屏幕加載cell的方法。

-(void)loadCurrentCells{
    NSArray * array = [self.tableView indexPathsForVisibleRows];
    for (NSIndexPath *indexPath in array) {
        JJTableViewCell * cell = (JJTableViewCell *)[self.tableView cellForRowAtIndexPath:indexPath];
        ImageModel *model = _dataArray[indexPath.row];
        //設(shè)置為可以加載
        model.isLoad = YES;
       //配置cell
        [cell configCellWithImageModel:model];
    }
}

cell里面對model的isLoad進行判斷。

- (void)configCellWithImageModel:(ImageModel *)model
{
    if (model.isLoad) {
        [_imageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr]];
    }else {
        _imageView.image = [UIImage imageNamed:@"default_images_icon"];
    }
}

如果暫不加載，我們可以先設(shè)置占用圖片。

這樣一來，我們只要監(jiān)聽停止滑動的時候，我們就設(shè)置加載當前頁面的內(nèi)容即可。

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    if (!decelerate) {
        [self loadCurrentCells];
    }
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    [self loadCurrentCells];
}

當然一開始我們reloaData的時候，所有isload都為false，所以我們需要加載一次當前cell內(nèi)容。

[self.tableView reloadData];
[self loadCurrentCells];

這樣，我們就可以做到一直滑動的時候，不異步加載圖片，等滑動停止再加載當前屏幕的圖片。

當然除了這種寫法，我們還可以通過RunLoop來實現(xiàn)。

預(yù)加載

所謂預(yù)加載，就是一直滑動，我們翻頁的時候，提前加載數(shù)據(jù)出來，讓用戶的感覺就是一直有數(shù)據(jù)。就沒有出現(xiàn)上拉加載更多這種情況。

總體思路是：當滑動距離占比到了總滑動距離的時候的%90（不固定），就觸發(fā)預(yù)加載。

以上就是關(guān)于“ios開發(fā)UITableViewCell圖片加載優(yōu)化的方法”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。