I made the example below to test performance and monitor frame drops for larger amounts of images. On local preview, all images show up just fine. On Android preview, images stop appearing after about #150.
In memory monitor in Android, it looks like there is still tons to spare, so I don’t think it’s that.
Image sizes range from 8 kb to 22 kb, so a rough average of 15 kb. Performance of scrolling seems acceptable so I don’t feel as tho the phone itself is being overloaded…
<App Theme="Basic">
<DockPanel>
<JavaScript>
var Observable = require("FuseJS/Observable");
var pages = Observable();
for (var i = 500; i >= 0; i--) {
var imageResource = "http://lorempixel.com/400/100?q="+i;
pages.add({title:"Testing "+i, imageResource: imageResource});
};
module.exports = {
pages: pages
};
</JavaScript>
<StackPanel Dock="Top" Background="#fff">
<DropShadow Size="10" Distance="1" Color="#000" Angle="90" />
<StatusBarBackground />
<iOS.StatusBarConfig Style="Light" />
<Panel>
<Text Value="Test Image Scrolling" TextAlignment="Center" TextColor="#000" FontSize="26" Margin="0,10" />
</Panel>
</StackPanel>
<ScrollView>
<StackPanel>
<Each Items="{pages}">
<Page Name="{title}" Height="100">
<Image Layer="Background" Url="{imageResource}" MemoryPolicy="UnloadUnused" Width="100%" Height="100%" StretchMode="Fill" />
<Text Value="{title}" TextColor="#FFF" />
</Page>
</Each>
</StackPanel>
</ScrollView>
</DockPanel>
</App>