Hi,
I tried some of your suggestions and I came up with a working sollution. But
I have the feeling I can do better than that.
Waht I did is having two of my images at the same time, both wrapped by a
div layer. One div layer is hidden, the other is visible. When something
happens the non visible image gets updated and when the update is done it
will be set to visible and the prior visible will be set to hidden.
I think the concept is ok... but I'd rather work with just one div layer and
copy the image to the visible area via javascript. But I couldn't figure out
how to do that.
Here is some code to show what I did in detail:
This is my image (I have two of theese, map1 and map 2)
NonCachingImage map = new NonCachingImage("map1", new
PropertyModel(this, "imageResourceMap")){
private static final long serialVersionUID = 1L;
@Override
protected void onBeforeRender() {
generateMap();
super.onBeforeRender();
}
};
map.setOutputMarkupId(true);
map.add(new AjaxEventBehavior("onLoad"){
@Override
protected void onEvent(AjaxRequestTarget target) {
}
@Override
protected CharSequence getSuccessScript() {
logger.debug("successscript;");
return "hideShowElement('divMap2', 'divMap1');";
}
});
I don't know if the SuccessScript is the right place for it... but it
worked.
This is my markup
<div id="divMapContainer" style="position: absolute;">
<div id="divMap1" style="display: block; position:
absolute; left: 10px;
top: 10px;">
<im.g id="map1" wicket:id = "map1" width=400 height=300
onMouseMove='onMove(this, event)'/>
</div>
<div id="divMap2" style="display: none; position:
absolute; left: 10px;
top: 10px;">
<im.g id="map2" wicket:id = "map2" width=400
height=300/>
</div>
</div>
The question now is:
Is the thing I did ok? or is the a better way of doing it?
Right now I have almost no flicker (90% flicker free)... but I think it can
do 100%.
nino martinez wael wrote:
>
> Okay here are some pointers :
>
> http://ninomartinez.wordpress.com/2008/09/09/apache-wicket-javascript-integration/
> http://blog.jayway.com/2008/09/26/wicket-javascript-internals-dissected/
>
> And I would probably make a hidden container in which the image loads(so
> that the browser has it loaded), and then use scriptaculous to load it as
> a
> replacement for the image..
>
>
> 2009/3/25 santo_75 <reinhard.vornh...@coredumped.de>
>
>>
>> Hi,
>>
>> well yes, I understand what you say. But I am not that deep into wicket
>> an
>> ajax yet... so right now, I don't know what to do next.
>>
>> Could you, or anyone else, give some details how to submit the image to
>> the
>> client-browser and not show it before it's fully loaded?
>>
>>
>> thx
>> Santo
>>
>>
>> nino martinez wael wrote:
>> >
>> > Hi
>> >
>> > Must be the delay to your server (which is normal I think), I'd suggest
>> > using something like scriptaculus and then a fade in / out effect. You
>> > could
>> > possibly also just prefect it and replace it when fully loaded.
>> >
>> > 2009/3/24 santo_75 <reinhard.vornh...@coredumped.de>
>> >
>> >>
>> >> Hi there,
>> >>
>> >> i have a page that updates an image through a ajax request.
>> >>
>> >> Some Code first:
>> >>
>> >> public class MyPage extends WebPage{
>> >> private RenderedDynamicImageResource imageResourceMap;
>> >>
>> >> ...
>> >> NonCachingImage map = new NonCachingImage("map", new
>> PropertyModel(this,
>> >> "imageResourceMap")){
>> >> private static final long serialVersionUID = 1L;
>> >>
>> >> @Override
>> >> protected void onBeforeRender() {
>> >> generateMap();
>> >> super.onBeforeRender();
>> >> }
>> >> };
>> >>
>> >>
>> >> AjaxLink lNorth = new AjaxLink("north_link", this.getModel()) {
>> >> @Override
>> >> public void onClick(AjaxRequestTarget target) {
>> >> ...
>> >> target.addComponent(Overview.this.get("map"));
>> >> }
>> >> };
>> >>
>> >>
>> >> private void generateMap(){
>> >> HexCoordinates hc = (HexCoordinates) getModelObject();
>> >> imageResourceMap = mapGenerationService.getMap(hc.getX(),
>> >> hc.getY(),
>> >> 6);
>> >> }
>> >>
>> >> ...
>> >> }
>> >>
>> >> html markup is this
>> >>
>> >> ...
>> >>
>> >> ...
>> >>
>> >>
>> >> So my problem is, everytime I click the ajaxlink the image gets
>> updated
>> >> correctly but it flickers. Which is very unpleasant. Doesn't matter if
>> I
>> >> use
>> >> IE or FF. Both show the flickering effect.
>> >>
>> >> Any help is greatly appreciated.
>> >> Thanx
>> >> Santo.
>> >>
>> >> --
>> >> View this message in context:
>> >>
>> http://www.nabble.com/How-to-prevent-a-flickering-when-Ajax-updates-an-Image-tp22691158p22691158.html
>> >> Sent from the Wicket - User mailing list archive at Nabble.com.
>> >>
>> >>
>> >> ---------------------------------------------------------------------
>> >> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
>> >> For additional commands, e-mail: users-h...@wicket.apache.org
>> >>
>> >>
>> >
>> >
>>
>> --
>> View this message in context:
>> http://www.nabble.com/How-to-prevent-a-flickering-when-Ajax-updates-an-Image-tp22691158p22697431.html
>> Sent from the Wicket - User mailing list archive at Nabble.com.
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
>> For additional commands, e-mail: users-h...@wicket.apache.org
>>
>>
>
>
--
View this message in context:
http://www.nabble.com/How-to-prevent-a-flickering-when-Ajax-updates-an-Image-tp22691158p22781340.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org
