1. #1
    Sencha User
    Join Date
    Oct 2011
    Location
    Pune, India
    Posts
    22
    Vote Rating
    0
    krislogy is on a distinguished road

      0  

    Default First-time Image Loading Issue

    First-time Image Loading Issue


    I have three (header, body, footer) Containers inside my ViewPort (vbox or fit layout) so that all three are visible at once.
    None of these containers have any height, width set explicitly. My header is docked at top.

    In the header container, I set this.html = "[<img> with valid src, but no height or width]", and nothing else. Just that.
    When I check on the browser, this image doesn't show up the first time, but then after that, it shows up on following requests.
    But if I specify image height in the <img> html, it shows up properly (first time too).

    [NOTE: By First-time, I mean the first time that Image is "used" or "opened" in the browser. Basically, an image that the browser had never loaded/cached before]

    On inspecting I found that during the first-time, Sencha computes the clientWidth/Height of this header = 0.
    I figured this may be because it takes some time to load the image and cache it???

    THAT's the main problem!!!

    Now testing this is a bit tricky. You HAVE TO give a new image "src" everytime you want to the check the "first-time" load. So, if you want to test below code too, please change the image marked bold below everytime...
    Code:
    MyViewPort = Ext.extend(Ext.Panel,{
        fullscreen: true,
        layout: 'fit',
        initComponent:function(){
            Ext.apply(this,{
                dockedItems: [{
                    xtype: 'container',
                    dock: 'top',
                    html: '<img src="[my_image.jpg]" alt="" />'
                }],
                items: [
                    {
                        xtype: 'container',
                        html: 'this is my page body'
                    },
                    {
                        xtype: 'container',
                        html: 'and the footer'
                    }
                ]
            });
            MyViewPort.superclass.initComponent.apply(this, arguments);        
        }
    });
    Please advice!


    P.S.: :-) Please don't tell me why I can't live with adding the height/width attributes to the image. I CANT!!! Cuz I won't be the one adding that html in my app. It will be dynamic, and from an "end-user" .
    Now we all know how stubborn (or sometimes stupid) end-users can be when we explain them these "limitations".

    Thanks.!!!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,652
    Vote Rating
    901
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Your hands are kind of tied. TO know what height it needs, it needs things to be loaded.

    Do also note that you can clear the cache and that way you don't have to use a different image.

    Also you can use src.sencha.io to resize images on the fly.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Location
    Pune, India
    Posts
    22
    Vote Rating
    0
    krislogy is on a distinguished road

      0  

    Default Hmmm...

    Hmmm...


    Ok Thanks... but you do understand my problem, right?
    Isn't this a very, very basic thing/requirement people may try out the first thing when they start learning Sencha? [i.e. to put an <img> in "html" property of an Ext.Container and see what happens]

    So, I was actually hoping to know the existing Sencha standard-practices or good-code-practices that help achieve this, say, using XTemplates -or- someway to actually detect if image-resource is loaded or not and then load my container... -or- call doComponentLayout again??... or something like that.
    ... as I understand the trick is to somehow let Sencha Engine know the height and width involved with the resource files (even if they are not yet loaded).

    Please let me know if you figure something out.! I sure hope you do!!

    Thanks!

    ((PS: Ohh yes, clearing cache also works. I should've mentioned that too. T'was stupid of me ))

  4. #4
    Touch Premium Member
    Join Date
    Aug 2010
    Posts
    195
    Vote Rating
    2
    hitman01 is on a distinguished road

      0  

    Default


    I also would like to know a solution or work around to this problem.. I posted on this forum about this before but got no reply.

    There needs to be a proper way to deal with this since in a lot of cases we dont have image height/width.
    http://www.dev4.life - Software Development Blog

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Location
    Pune, India
    Posts
    22
    Vote Rating
    0
    krislogy is on a distinguished road

      0  

    Default


    Sencha 2.0 handles this problem perfectly.. the way its layout-engine has been designed. All the more reasons to switch to 2.0 asap!! Cheers!

  6. #6
    Sencha User
    Join Date
    Apr 2014
    Posts
    2
    Vote Rating
    0
    BMerlet is on a distinguished road

      0  

    Default same Issue On ExtJS 4.2

    same Issue On ExtJS 4.2


    I have the same issue with ExtJS 4.2. How did you resolve this problem?

    By same problem, i mean that the first time i load an image, nothing happens, but after the images is loaded in the browser's cache it loads perfectly fine.

  7. #7
    Sencha User
    Join Date
    Oct 2011
    Location
    Pune, India
    Posts
    22
    Vote Rating
    0
    krislogy is on a distinguished road

      0  

    Default Hack Logic - Preload your image resource

    Hack Logic - Preload your image resource


    @BMerlet : Well, I can think of a few hack logics... Try one of these and see if works for you:
    1. If possible, load your image in your app by placing it right below <body> and hope it loads fast enough before your container code is executed.
      HTML Code:
      <body>
          <img src="your/image.src" />
          ...
    2. OR -- Ajax load your image and only on its success callback execute JS that leads to your container creation/initialization.
      Code:
      //jQuery example
      $.get('/image/your.img', function (res) { //success callback
          //write your container initialization logic here
      });
    3. OR -- If you could use something like Ext.Require(...) or Ext.Loader(...) class (sorry, I forgot the syntax) at the beginning of your app initialization that you can use to load this image resource, then do that and only after those are loaded should your app fire up.
    Let me know how it turns out...

  8. #8
    Sencha User
    Join Date
    Apr 2014
    Posts
    2
    Vote Rating
    0
    BMerlet is on a distinguished road

      0  

    Default


    @krislogy : Thanks for your answer, but i found a solution this morning. I found out that the problem was not actually the image not loading, it was the panel where i put the image that did not resize after the image loaded. I fixed this by inserting the image direclty into the main panel of my window and not into an intermediary panel.