ASNetworkImageNode

ASNetworkImageNode can be used any time you need to display an image that is being hosted remotely. All you have to do is set the .URL property with the appropriate NSURL instance and the image will be asynchonously loaded and concurrently rendered for you.

ASNetworkImageNode *imageNode = [[ASNetworkImageNode alloc] init];
imageNode.URL = [NSURL URLWithString:@"https://someurl.com/image_uri"];
	

let imageNode = ASNetworkImageNode()
imageNode.url = URL(string: "https://someurl.com/image_uri")
	

Laying Out a Network Image Node

Since an ASNetworkImageNode has no intrinsic content size when it is created, it is necessary for you to explicitly specify how they should be laid out.

Option 1: .style.preferredSize

If you have a standard size you want the image node’s frame size to be you can use the .style.preferredSize property.

- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constraint
{
	imageNode.style.preferredSize = CGSizeMake(100, 200);
	...
	return finalLayoutSpec;
}

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
	imageNode.style.preferredSize = CGSize(width: 100, height: 200)
	...
	return finalLayoutSpec
}

Option 2: ASRatioLayoutSpec

This is also a perfect place to use ASRatioLayoutSpec. Instead of assigning a static size for the image, you can assign a ratio and the image will maintain that ratio when it has finished loading and is displayed.

- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constraint
{
	CGFloat ratio = 3.0/1.0;
	ASRatioLayoutSpec *imageRatioSpec = [ASRatioLayoutSpec ratioLayoutSpecWithRatio:ratio child:self.imageNode];
	...
	return finalLayoutSpec;
}

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
	let ratio: CGFloat = 3.0/1.0
	let imageRatioSpec = ASRatioLayoutSpec(ratio:ratio, child:self.imageNode)
	...
	return finalLayoutSpec
}

Under the Hood

Progressive JPEG Support

Thanks to the inclusion of PINRemoteImage, network image nodes now offer full support for loading progressive JPEGs. This means that if your server provides them, your images will display quickly at a lower quality that will scale up as more data is loaded.

To enable progressive loading, just set shouldRenderProgressImages to YES like so:

networkImageNode.shouldRenderProgressImages = YES;

networkImageNode.shouldRenderProgressImages = true

It’s important to remember that this is using one image that is progressively loaded. If your server is constrained to using regular JPEGs, but provides you with multiple versions of increasing quality, you should check out ASMultiplexImageNode instead.

Automatic Caching

ASNetworkImageNode now uses PINCache under the hood by default to cache network images automatically.

GIF Support

ASNetworkImageNode provides GIF support through PINRemoteImage’s beta PINAnimatedImage. Of note! This support will not work for local files unless shouldCacheImage is set to NO.

Edit on GitHub