Images rendered by ng-repeat needs to be pre-cached.

[elfgoh]

For example, say you have 2 sets of images on a page. One that is rendered normally, eg

<img src="alpha.jpg"> 

And another set that is rendered by ng-repeat: eg.

<ul ng-repeat="member in family_members"> 
        <li> 
                <img src="{{ member.image }}"> 
                <h3>{{ member.name }}</h3> 
                <p>{{ member.relationship }}</p> 
        </li> 
</ul> 

I have observed that

<img src="alpha.jpg">

and the text {{ member.name }} and {{ member.relationship }} are already present on the page as the page gets loaded. However, the images,

<img src="{{ member.image }}">

take a short while (probably in the range of less than a second but still discernible) to load. This does not happen in the desktop browser but happens for me in my phonegap app.

Here is the way to reproduce the issue on an iPad. Should work on iPhone as well.

1st load http://hackerspacesg.valcatohosted.com/jqm-angular and click on the big button 'Go to home' to cache the images at http://hackerspacesg.valcatohosted.com/jqm-angular/home.html

For a quick and dirty simulation of an embedded web view, similar to PhoneGap (same rendering deal, minus phone gap.js), go to http://hackerspacesg.valcatohosted.com/jqm-angular , save it to your home screen in iOS, then open it and browse the site. The issue that I reported should be reproduced.

[tbosch]

Thanks for reporting this, and I didn't forget it!

[tbosch]

Hi, sorry, I can't reproduce this on my iPad2. And it looks very like a browser caching issue, not related to angular, jquery mobile or the adapter.

Closing this for now, sorry.

Tobias