Disabling interstitial graphic when using cfdiv binding

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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');
}

Answer 4

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;}