dynamic image cropped in firefox

[acarur01]

the first time I load the page, the imagebutton is cut off at 100px in height. The image is .png - transparent

the other image i am testing with is jpg. This one gets cut off at 24px in width

Once I refresh the page, I see in the jsConsole that the image button has been resized to fit the image

I've made sure to set the imageType to normal if a width/height is not specified before loading.

Can you give me any ideas on how to debug this?

[Isomorphic]

Image size is only available once the browser has loaded it, so it looks like you've arrange components such that they depend on knowing this size, so the layout is only correct if the image is already cached.

If you know the image size in advance, supplying it to the component as its size is the highest performance approach. Otherwise, you can call adjustForContent after the image is loaded.

[acarur01]

ok. I'm trying to call that method right after I set the source property. Is this too early?

[Isomorphic]

Yes, you need to wait for the image to load. The FileLoader module has a number of APIs that will let you wait for media or other resources to load.

[acarur01]

Could you tell me which one specifically I can use? I don't see anything I can use just from looking at the list of methods.
Do you mean something like "cacheFiles" and specifying an onLoad function?

[Isomorphic]

Right, cacheFiles() with an onload function.

[acarur01]

but this would mean I need to actually know what images to put on that list, no?

[acarur01]

The above suggestion isn't sufficient as there is way for me to know ahead of time what images will be loaded dynamically.

So I've tried sending the image width/height from the server as soon as I know what image it is. After I set the src property, I call resize on my image canvas. I still have refresh issues.

I need a concrete fix for this ASAP.

[Isomorphic]

Sorry, it's not clear what you think you need a fix for. The browser needs to load an image to know it's size and you have an API to load images, so what do you need?

[acarur01]

The same question as above.. if I use "cacheFiles" I need a list of images that I think may be loaded dynamically. I do not have the resource to determine this. Therefore I cannot use the API you have provided.

So I need a solution for my original problem. Loading a dynamic image the first time, the image is cut-off in firefox. Once I refresh the page, then the image is shown correctly.

[Isomorphic]

Sorry, we can't figure out what you're expecting here.. you have an API to load an image and find out when it's loaded, that's the API you need to use if you want to be able to size to images. There's not another possibility here so far as we understand.

[acarur01]

Ok. So I call this API now everytime that src value is set for a dynamic image - it works fine.

Would you have a brief explanation as to why this was an issue in Firefox and not in IE?

[Isomorphic]

It would be an issue in any browser, you're probably seeing the difference based on which browser already has the image cached.

[acarur01]

I have the following custom code that I would like to get to behave like the second piece of code. Instead of cropping the size that the image is set to, I want the image to shrink to that size. What am I missing?

isc.CwImageItem.addProperties({
    init:function () {
        this.canvas = isc.ImgButton.create({
            showTitle: this.showTitle,
            src:this.src,
            cwImageID: this.cwImageID,
            width:this.width,
            height:this.height,
            form: this.form,
            autoFit: this.autoFit,
            showRollOver: this.showRollOver,
            showDown: this.showDown,
            overflow: "visible",
            canFocus: this.canFocus,
            imageType: this.imageType,
            click: this.click,
            cwUserUrl: this.cwUserUrl,
            visibility: this.visibility,
            baseStyle: this.baseStyle,
            auditor: this.auditor
        });
        this.canvas.adjustForContent(true);

        return this.Super("init", arguments);
    }
    
});
isc.VLayout.create({width: "100%",members:[
isc.DynamicForm.create({ID: "test", width:50, height:"*", fields:[{_constructor: "CwImageItem",
    left: 400,
    width:20,                
    height:20,
    src:"http://www.google.ca/logos/2011/canadaelections11-hp.png"}]
})]
});

isc.ImgButton.create({
    top: 400,
    width:18,                
    height:18,
    src:"http://www.google.ca/logos/2011/canadaelections11-hp.png"
});

[Isomorphic]

Look at these settings:

            autoFit: this.autoFit,
            showRollOver: this.showRollOver,
            showDown: this.showDown,
            canFocus: this.canFocus,
            imageType: this.imageType,
            visibility: this.visibility,
            baseStyle: this.baseStyle

For all of these, if nothing is set on the formItem, then you're assigning null to the target property on the ImgButton. In some cases this is overriding a default that is not null (eg imageType).