Hello,
Now that Ionic has improved collection-repeat, I decided to substitute ng-repeat with it. The scrolling performance is better now with collection-repeat. But I’m having problems lazy loading the images in collection-repeat.
The specific problems I had with ng-repeat was this. I am using the sidemenu template. The first view that loads on app startup is the list view that gets its data from a remote server. This data has 1011 items. Things were working fine. I even use a limitTo in the ng-repeat so that it loads only 10 items on the view every 3 seconds. But when I go to another view and stay there for at least 5 minutes, the app either freezes or crashes when I open up the sidemenu and click on the row that loads that list view.
So collection-repeat is better for performance especially when you have a 1000 items with pictures. Unfortunately, I can’t seem to get the images to lazy load. I’m using this module: https://github.com/paveisistemas/ionic-image-lazy-load/blob/master/ionic-image-lazy-load.js and it worked fine for ng-repeat. I made some modifications to this module by adding a placeholder image until the real image is in view. So what is happening is that it when the app loads and the first ten items on the list appear, the images are all grey (placeholder image) until I actually scroll. This didn’t happen when I was using ng-repeat. When I was using ng-repeat, the images that were in view automatically load without me scrolling.
Unfortunately, I don’t think I can use CodePen to demonstrate this one because the pictures are in a firewall-blocked remote server.
But I made a GitHub gist: https://gist.github.com/junerockwell/1829a8789d8bb91c2e69
The JSON data’s structure looks like this:
{
"_id": {
"$oid": "54fdd165e74a79b75610ac1d"
},
"title": "Stuffed Omelet",
"imagePath": "http://fossil.cchd.org:3001/images/StuffOmelet.jpg",
"serves": 4,
"mealtimes": "Breakfast",
"directions": [
"Heat broiler. In a medium bowl, combine the mango, scallions, 1 tablespoon of the oil, lime juice, rushed red pepper, and 1/4 teaspoon salt. Set aside",
"Rub the pork with the remaining 1 teaspoon oil.",
"Broil the pork, turning occassionally, until cooked through, 12 to 15 minutes. Let rest 5 minutes before slicing.",
"Serve the pork with the salsa"
],
"ingredients": [
"1 mango, chopped",
"2 scallions, chopped",
"1 tablespoon plus 1 teaspoon olive oil",
"1 tablespoon fresh lime juice",
"1/4 teaspoon crushed red pepper",
"kosher salt",
"1 & 1/4-pound pork tenderloin",
"1 teaspoon ground coriander"
],
"__v": 0
}
Furthermore, the lazy loading seems to affect the randomization of images. For example, if I’ve been scrolling and the images have been loading successfully, eventually a few items will have the wrong picture. For example, the title of the item in the list is correct. If the title is “Stuffed Omelet,” the picture is a salad. When I open the details view, the correct data of the Stuff Omelet loads, not the salad. And it’s not just one image. It’s mostly the pictures that are further along the list.
