0

I have a html5 app which loads some data at startup and after all has been loaded, the user can browse this data. Associated with each data object is an image, a png file. This shall work well on mobile devices with limited bandwidth. When the user browses the data, images are displayed and the user experience is that the display of images are delayed because it takes some time to load those images from the server.

So, I want to preload the images so they are displayed instantly when the user browses the data. I therefore have a loop that runs through all data and does this piece of code for each image:

    preloadImage: function(url)
    {
        if(url)
        {
            // preload image
            if (document.images) {
                var img1 = new Image();
                img1.src = url;
            }
        }
    }

This is a fairly straight forward way of doing this.

I have a few hundred images to load. This works well in most cases.

Problem

When I test this on an Samsung Galaxy SIII with Android 4.1.2, I get 

"RangeError: Maximum call stack size exceeded".

I get this after about 20-30 preloadImage calls. My guess is that there is some kind of limitation in the Android html/javascript engine on how many asynchronous calls may be pending at one time.

I don't have this problem on PC's (IE9, Chrome, Firefox) nor on any Apple devices.

Any enlightenment, tips or solutions to this problem?

Vilhelm H.
  • 1,315
  • 1
  • 7
  • 15
  • Maximum call stack is usually due to function call stack getting too big, for example in case of recursive calls. Where exactly do you get this error ? – Denys Séguret Apr 02 '13 at 09:27
  • http://stackoverflow.com/questions/6095530/maximum-call-stack-size-exceeded-error –  Apr 02 '13 at 09:29
  • I am sure it is not recursive calls that triggers this. The error happens within the preloadImages function. I will test some more and look into exactly which line it is, and update my post accordingly. – Vilhelm H. Apr 02 '13 at 09:31
  • I am using a beta version of the Ember.js framework. It looks like the error is deep inside there somewhere. – Vilhelm H. Apr 04 '13 at 13:11

0 Answers0