How to lazy load imags with collection-repeat?


#1

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.


#2

@junerockwell since the new collection-repeat uses virtual DOM now which only renders current visible items, you may not need the lazy load module anymore. (assuming your ionic version is rc0 or above)

Have you tried removing the lazy load module and just using collection-repeat to render the images for your list items? As long as you’re not using Angulars 1.3 bind once for your image you shouldnt have any caching issues.


#3

@djett I tried taking out the lazy loading module that I’m currently using before and it did work. One problem I’ve noticed is that some images get pixaleted when loading. Sometimes the images takes a while to load and sometimes the images do load on time.

Below are screenshots (step-by-step) of what’s happening if an image doesn’t load on time all the way:

Is there a way to fix this or this is just normal? Maybe if I update my Ionic project to the latest release candidate there won’t be any more slow-pixilated loading? I’m still using 1.3.19 CLI.


#4

It is JPEG images progressive loading feature. Trying to show users full image as fast as possible.