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
