I am creating an AJAX transition between to pages where I have a hero image which stays the same on both pages.
After clicking on a link, I center the image, add the new HTML behind and fadeOut the center Image.
The problem is, even with a cached image (it is the same file) I see the image appearing suddenly in the behind (from AJAX response, rendering after appending to DOM) when fading out the image in the front.
Even by adding a little delay to the fadeout of the image in front, the image in the back is still no ready. (Probably the rendering just takes more time).
My options would be to wait for the Ajax image div to have rendered completely (which I don't know how to do), or – and that is what I'd like to try:
Replace (copy) the image within the AJAX response before adding it to the DOM.
Is this even possible, and will it help improving the performance?
I will also try to replace the div immediately after replacing the content with the AJAX response.
Any hints are still very welcome.
cheers
You could set the css z-index property so that the top image stays on the top. And set an event listener so when the image underneath is finished loading you can fade out the top image.
$('#bottom-img').on('load', function() {
$('#top-img').fadeOut();
});
Well thanks for the answer. This is what I meant. This would require some waiting for the image to finish loading and then fadeOut the top image. But I got a nicer solution:
Because the two images are exactly the same, I replace the content in the back (ajax response), and immediately after I copy the image on top into the ajax response (so I replace the image with an already loaded one).
Then I fade Out immediately.
This gives me a very smooth looking transition and the downside of the «waiting until loaded» is gone.
(In comparison to my initial question, where I wanted to replace the image within the ajax response before adding it to the DOM, I now add it to the DOM and manipulate it immediately.)
Thanks anyway.
Cheers
Related
I just try to make fancybox display ajax content including one larger image. that works good so far... I just see that the fancybox is not waiting for the image to be loaded. So at the moment the fancebox is displayed, then positioned, then the image arrived, then resized and positioned again. thats not cool.
Does somebody know how to handle that?
Thanks in advance,
Florian
I'm building a slider. There is a set of slides, which I'm using as a content source and this content is appended to a transition wrapper everytime the slide is changing. After the transition finishes, the transition wrapper is removed from DOM. When I add completely new content (image) to the slider and I open it in Chrome for the first time, this image is not, of course, in Chrome's cache. The problem shows when I append the transition wrapper (with this new image) into DOM. Chrome sometimes (and sometimes not) sends a request to get that image and recieves a 304 response. It makes this request even 3x for the same image. But it really happens only when the slider with the new images is loaded for the first time. After refresh, the Chrome gets those "new" images from its cache and the slider works perfectly. Other browsers are OK.
BTW: I also use imagesLoaded plugin, but image preloading doesn't seem to have any effect on this problem.
I know there are better approaches to create image slider - using images as background-image etc. But my content source => transition wrapper is the way I'm using to create responsive / not-only-image / CSS3 slider.
I'm going to release this plugin soon, so I would really like to solve this problem quickly.
It's not possible to set transparent background for WebBrowser of WP7. To make impression of transparent background I want to do the following workaround. I want:
To find a position and size of WebBrowser on the page.
To get page's background image.
Crop it with values what I found on step 1.
To save result in IsolatedStorage
To parse HTML and place <body background="RESULTBACKGROUND">
MyWebBrowser.NavigateToString(NewHtmlString);
I think this should be a workaround of transparent background and should work.
For now I am trying just to place any .jpg image (let's say test.jpg) on step 5.
But fail. I have "Build Action" property of file set to "Content". It is placed in the root of the project. And <body background="test.jpg"> not working. Back of the WebBrowser is still white.
What I am doing wrong?
UPD:
Step 5 is solved.
2Claus: No! Not only from web. I saved both html file and image file to IsolatedStorage and WebBrowser can show image as a backgroud.
Now the problem is that background cannot be fixed. I tried many differrent things with styles. I also tried to add a fixed div behind my text. Nothing works. The picture is always scrolling with a text. I tried to add onscroll event and pass it scrolled value to move the div in an opposite direction, but div is glued to the page :(
Any ideas?
So assuming you're talking about the WebBrowser control, you're forgetting that the HTML only can refer to urls on the world wide web.
So either you need to host your background images on a website, or you need to inject a CSS style that sets the background to either white or black (the two default background-colours of the platform).
For WebBrowser, You don't actually have to save it to the ISO to make changes on the page. You can load it navigate to it normally, and then use InvokeScript to make the changes via custom JS code. It can be a little tricky though, as you will probably need to heavily rely on the eval and stringization. The problem mentioned by Claus is still there - but you need to do some experiments. With the Mango release and SDK 7.1+, the platform support IsoltatedStorage imagesources in the form of is://path/file - maybe - maybe - maybe squared - the webbrowser's renderer udnerstands them too - then setting your bkg's url to such would work. I doubt though, as it could be seen as some minor security breach, etc
I now bumped into the same background fixed image problem. For someone wandering here I solved it placing content into a fixed-height container (div) therefore the container contents is being scrolled and not the html page, leaving background picture "fixed".
body
{
background-image:url('...');
background-position:-20px -150px;
background-repeat:no-repeat;
background-attachment:fixed;
}
div
{
height:300px;
overflow:scroll;
}
Of course background-position and div height is set specifically for a WebBrowser position in page and it's size.
I have a dojo animation object of about 15 images. I'm also using dojo.fx.chain to link them all together.
Right before I create all my dojo.fadeIn's and dojo.fadeOut's I added in some basic javascript to preload each image.
My question is: Am I doing this the hard way or is there some function/attr I can set in the animation object to do this?
I do not think there is a predefined method in dojo to preload these images for your animation.
I guess you are listening image.onload and image.onerror events to preload images, it is a common method. If you feel it is too difficult and hard to control, you can try a simple clean css way that is to put an invisible div into your page and set background images with these animation images. When the page load, the images are automatically loaded.
dojo Animations are not specifically geared around images, they work on an abstract level and may operate on DOM nodes. So, there's no built-in support for IMG nodes specifically.
There is dojox.image.preload (http://api.dojotoolkit.org/jsdoc/HEAD/dojox.image.preload) which will do the work virsir suggested of loading images into an offscreen div, but it does not (currently) arrange an onLoad event hook for you to detect when they're loaded and thus play your animation.
I imagine you could use preload()'s return value and use it to hook into onLoad, but that's an exercise for the reader. Have a look at the source code, dojox/image/_base.js.
Is there a way to keep the "Loading..." graphic from appearing when cfdiv refreshes? I'd like to prevent the flicker of loading the graphic then loading the new html.
By adding these lines at the bottom of the header, it overwrites the "Loading..." html and seems to prevent the flickering effect in both IE and FireFox:
<script language="JavaScript">
_cf_loadingtexthtml="";
</script>
While this seems to do the trick, it would be nice if there was an officially supported way to customize the loading animation on a per page or per control basis. Hopefully they add support for that in ColdFusion9.
I don't think there is currently a way to do this programmatically within the cfdiv tag. If you really want to get rid of that "Loading..." message and the image, there are a couple places you can look.
You can rename or delete the image, which is located at: CFIDE\scripts\ajax\resources\cf\images\loading.gif
That only gets rid of the animation. The "Loading..." text can be blanked out to an empty string, and is defined in: CFIDE\scripts\ajax\messages\cfmessage.js
Making these changes will obviously have an impact on tags other than cfdiv, but if you are looking to eliminate this behavior in one place, I'm sure you won't mind killing it everywhere else too. :)
I'd love to see a cleaner way to do this if anybody else has any ideas.
This is by no means a comprehensive or an elegant solution, but I found using negative margins on adjacent elements can "cover" the animation. I don't know if this method works in all cases, but for my particular case it worked. The animation appeared next to a binded text field, to the right of which was a submit button. The layer was floated to the right. I used negative margin on the submit button and it covered the animation without affecting the layer alignment.
Another measure I did was to check the layer structure, and added the following code to my css be sure:
#TitleNameloadingicon {visibility:hidden;}
#TitleName_cf_button {visibility:hidden;}
#TitleNameautosuggest {background-color:#ffffff;}
You can create functions to change the message prior calling the ajax load that can set the message and image to a new value.
function loadingOrder(){
_cf_loadingtexthtml="Loading Order Form <image src='/CFIDE/scripts/ajax/resources/cf/images/loading.gif'>";
}
function loadingNavigation(){
_cf_loadingtexthtml="Loading Menu <image src='/CFIDE/scripts/ajax/resources/cf/images/loading_nav.gif'>";
}
(these will eventually be rolled into a single function that will take both a text_value and an image_path parameter)
In some of my processes that load both a main and left nav cfdiv I use a function like this:
function locateCreateOrder(){
loadingOrder();
ColdFusion.navigate('/functional_areas/orders/orders_actions/cf9_act_orders_index.cfm','main_content');
loadingNavigation();
ColdFusion.navigate('/functional_areas/products/products_actions/cf9_products_menu.cfm','left_menu');
}