Sdwebimage: Images not showing in TableViewCells until it scroll-down

[0m15]

First, thanks for this great project.

I'm facing an Issue occuring when I use UIImageView+WebCache category in a TableViewCell.

The issue is that first cells of the TableView are displaying the placeholder image and not the remote image (even if it's cached), until I scroll up or down the TableView itself.

The problem is that, when I have few cells I can't display any Image but only the placeholder.

Are there any workaround? Note that, when not in a TableView context the remote image is loaded correctly.

[rs]

Thanks for you feedback. Would you have a simple way to reproduce this?

[0m15]

Sorry for late.

The way I've used it:

1) I have a custom UITableViewCell (derived from ABTableViewCell that uses drawRect method to draw cells more fast;
2) in tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath I do:
UIImageView *myImageView = [[UIImageView alloc] init];
[myImageView setImageWithURL:anURL placeHodlerImage:placeHolderImage];

3) Now, when I launch my app, first cells are not displaying images until I a) scroll down, b) scroll up backì
4) I temporary solved this issue by performing selector setNeedsDisplay:
[cell performSelectorOnMainThread:@selector(setNeedsDisplay) withObject:nil waitUntilDone:NO];

[thillerson]

Zimok, my bet is that you're not providing a placeholderImage. I see the same issue until I provide a placeholderImage. That's probably a better user experience anyway, although there may be exceptions...

[tylerhall]

I also can confirm the image wasn't being displayed until the table was scrolled. But, like the previous poster said, adding a placeholder image fixed it.

On May 24, 2011, at 10:54 PM, [email protected] wrote:

Zimok, my bet is that you're not providing a placeholderImage. I see the same issue until I provide a placeholderImage. That's probably a better user experience anyway, although there may be exceptions...

Reply to this email directly or view it on GitHub:
https://github.com/rs/SDWebImage/issues/9#comment_1233081

[thillerson]

One thing I've just noticed is that if the placeholder image and the final image are not the same dimensions, the loaded image will retain the dimensions of the placeholder until something else makes it redraw.

[thiagoperes]

Im getting the same issue as thillerson, could you provide a solution for that?

[gerardp]

"One thing I've just noticed is that if the placeholder image and the final image are not the same dimensions, the loaded image will retain the dimensions of the placeholder until something else makes it redraw."

I have the same problem!!
Anybody has the solution?

[Hackmodford]

I can confirm the need for a placeholder image to fix this bug.

[0m15]

Yeah.
Sorry fot late. Placing a placeholder image make it works properly.

[martingjaldbaek]

I just had this issue but fixed it without the need for a placeholder image. Setting the correct contentMode (in my case aspect fill) does the trick. Here's the kicker - I spent an hour trying to make this work to no effect because I was accidentally setting the image on cell.imageView (a native property of UITableViewCell apparently) rather than cell.myCustomImageView, which happened to occupy the same space. It turns out I was setting the contentMode on one of them (via Interface Builder), but actually loading the image in the other, and thus getting the wrong behavior. I hope this helps somebody.

[Hackmodford]

Could you be more specific for a noob?
I'm using the cell.imageView... are you saying I should create my own custom image view on my custom cell that occupies the same area and set that one?

[Hackmodford]

I can only get it to work correctly when using a custom image view I cannot use the default image view of the tableviewcell even if I set its content mode via code

[rs]

With the default imageView of a TableViewCell, you need to use a placeholder image, otherwise the cell will init without the image view (title aligned to the left border with no margin for the image) and wont be refreshed once image is finish downloading.

[Hackmodford]

Okay... that makes perfect sense.
Thank you very much!

[JacobSyndeo]

I'm completely new to this library (and fairly new to iOS development in general), but I'm encountering a problem with the solution of supplying a placeholder image.
My current code is:

[cell.imageView setImageWithURL:[NSURL URLWithString:[NSString stringWithFormat:@"http://music.bronynet.com/retrieve_artwork.php?artist_id=%@", cellValue.artistID]] andResize:CGSizeMake(80, 80) withContentMode:UIViewContentModeScaleAspectFit];

which automatically scales down any rectangular images to fit within the 80x80px dimensions of the table cell image. This code, however, doesn't show the images unless I scroll down and then back to the top, which redraws the cells.

So while editing this code to use a placeholder image instead, I noticed that there was no method in SDWebImage to include a placeholder image AND scale down the results coming in from the web, which leaves me with this:

[cell.imageView setImageWithURL:[NSURL URLWithString:[NSString stringWithFormat:@"http://music.bronynet.com/retrieve_artwork.php?artist_id=%@", cellValue.artistID]] placeholderImage:[UIImage imageNamed:@"artistPlaceholder.png"]]

This code works, but it will "squish" any rectangular images when they first load in. And after they're loaded, if I scroll down and then back up to the top (to redraw the cells), the rectangular images will display at the correct aspect ratio, but they're WIDER than 80px now, and push the label text off to the side.

Is there any way to aspect-fit the rectangular images into 80x80px AND use a placeholder image (so that it can auto-update the images)?

[hcamatthew]

I'm getting this same problem: Images will not load until I have started scrolling down the Table View. Once I come back to the cells after scrolling the Image will finally show up. Any fixes for why this is happening to me?

[vinayakparmar92]

same

[vinayakparmar92]

Just assign a placeholder image properly..I suggest it should be a loading icon image..Then it will work properly

[hilalbaig]

Assign a placeholder image properly.. issue with me was with wrong image extension that doesn't match with each other i.e. placeholder.jpeg and [email protected]

[rodrigoruiz]

I'm seeing the same problem and not even using SDWebImage (I'm using my own setImageFromLocalURL:).

Did anyone manage to solve this issue?

[JPROFFICIAL]

Although this issue is closed, I had found the same exact issues as the people above, and was unable to use a placeholderImg because I was using the SDWebImageManager.sharedManager().downloadImageWithURL call.

I was making the UIImageView.image = nil in cellReuse, and calling setNeedsLayout - layoutIfNeeded after the image loaded using that block.

The solution for me was: In the parameters of the above downloadImageWithURL call -> add SDWebImageOptions.AvoidAutoSetImage to the options parameter.

Now all of the images load as expected.

Hope this helps someone! Thx so much to the team at SDWebImage for this great lib.

[habibghantous]

hello, i am using SDWebImage in a collectionView, but i am getting the first batch of thumbs correctly, and when i scroll down the thumbs are empty for some reason here my code:

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let imageIndex = indexPath.row
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! PhotoCell
    DispatchQueue.global(qos: .userInitiated).async {
        DataManager.sharedInstance.getThumbUrlAt(categoryIndex: self.categoryIndex, imageIndex: imageIndex) {
            image in
            DispatchQueue.main.async {
                if let loadedImageCell = collectionView.cellForItem(at: indexPath) as? PhotoCell {
                    loadedImageCell.imageView.sd_setImage(with: URL(string: image), placeholderImage: UIImage(named: "placeholder.png"))

                    cell.layoutIfNeeded()
                }
            }
        }
    }
    cell.imageView.layer.cornerRadius = 6
    cell.imageView.layer.masksToBounds = true

    cell.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5).cgColor
    cell.layer.shadowOpacity = 0.5
    cell.layer.shadowRadius = 3
    cell.layer.shadowOffset = CGSize(width: 0, height: 0)
    cell.layer.shadowPath = UIBezierPath(roundedRect: cell.bounds, cornerRadius: 6).cgPath

    return cell
}

[dreampiggy]

Your code seems contains two async operation, which means when the cell is reused, it can not be set to a correct state immediately.

Remember that cellFotItem will be called each time you scroll and you should reset all the correct state for that cell(Because it be resued from another cell instance and the state is not sync with the current item). So it's better to keep the data model firstlly in your viewController or viewModel, then just use sd_setImage. sd_setImage will immediately reset the image to placeholder and then check cache or downloader, which keep the correct state.