Results 1 to 4 of 4

Thread: Slow connection / Mobile Safari timeout

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    Germany
    Posts
    21
    Answers
    1

    Default Slow connection / Mobile Safari timeout

    Hi there,
    I'm running into problems when loading HTML code which includes several images on iPad with slow connections like GPRS/EDGE.

    I read that that Mobile Safari on iPad has got a 60s timeout when loading content.


    Here is what I do

    1. This loads HTML to a panel:
    Code:
            Ext.Ajax.request({            url: 'public/resources/html/contentContact.html',
                method: 'GET',
                callback: function(options, success, response) {
                    this.contentContact.update(response.responseText);
                },
                scope: this
           });

    2. contentContact.html
    Code:
    <h1>Contact</h1>
    <br />
    <ul class="people-list">
        <li><img src="public/resources/img/concact/peter.jpg" ><span>Peter<span>Company</span></span></li>
        <li><img src="public/resources/img/contact/paul.jpg" ><span>Paul<span>CompanyXZ</span></span></li>
    ...
    (up to 15 images here)
    ..
    </ul>

    3. When I access the panel it shows only a ?-Symbol for missing file. When I reload the same page on Wifi or 3G it works fine.


    Any ideas how to fix this issue?

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450
    Answers
    3997

    Default

    Create the images in JavaScript and not in HTML.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    Germany
    Posts
    21
    Answers
    1

    Default

    You mean I should add the images to the DOM by JS and set a timer between the images?
    Otherwise I don't see any difference

    Do you know any technique for Sencha Rouch similar to http://developer.yahoo.com/yui/imageloader/ ?

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Location
    Germany
    Posts
    21
    Answers
    1

    Default

    I added a sloppy solution to my app which works quite nice.
    Of course I know this is not the Sencha way to do it.

    Any ideas how to do something like this with Sencha Touch itself are much appreciated.

    Recursive Javascript function I call with a beforeshow listener in my Ext.Container:
    Code:
        var counter = 0;
        var imgObjs = []
        var imgs = [
                'image1.jpg', 
                'image2.jpg', 
                'image3.jpg'
            ];
    
    
    function LoadImages() {
        
        if(counter < imgs.length) {
            imgObjs.push(new Image());
            imgObjs[counter].src = imgs[counter];
            
            imgObjs[counter].onload = function() {
                document.getElementsByClassName("people-list")[0].getElementsByTagName("img")[counter].src = imgs[counter];
                counter++;
                LoadImages();
            };
            
        }
    };
    HTML markup which is added by my Ext.Container
    Code:
    <ul class="people-list">
                    <li><img src="/resources/img/blank.gif" /><span>Peter<span>Company</span></span></li>
                    <li><img src="/resources/img/blank.gif" /><span>Paul<span>Company</span></span></li>
                    <li><img src="/resources/img/blank.gif" /><span>James<span>Company</span></span></li>
    </ul>

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •