About Ajax asynchronous GIF animated images

Source: Internet
Author: User
The story starts with a GIF image.
Next Article , My tree will asynchronously go to a server page to obtain the subnode after the user clicks the node on the tree, and add the subnode to the page.
At the beginning of the forum, I displayed my wait.gif image. As a result, when I added a node to the page, I found that the GIF Animated Image did not move !!
After the next time, I found that the time for the server to process concurrent data return requests was microsecond-level, so it would not be so slow. What is the problem?
Is there a problem with the frontend loading? The operations for adding sub-nodes to the tree on the front end are also lost in the asynchronous method, and the page should not be stuck.
After a test, it is found that even if the operation to add elements is put into the Asynchronous Method, JS processing is synchronized !! So this time will get stuck.
Explanation:
After Ajax is used, "ajax sends a request to the server page and the Service Page returns the processed data" is indeed asynchronous, however, operations performed after the request is sent back to the page, such as adding DOM elements or some logic operations. js Code All are synchronized.

See the test code:

Function Test2 ()
{
// Target page
VaR URL =   " Ajaxtest. aspx " ;
// Parameters passed to the target page
VaR Strparams =   " Testid = 3 " ;

VaR loader1 = new net. contentloader (URL, load, null, "get", strparams );
// Load ();
}

Function Load ()
{
VaR Html =   "" ;
For ( VaR I =   1 ; I <=   5000 ; I ++ )
{
Html+ =I+ ",";
}
Span1.innerhtml + = Html +   " <Br> " ;
}

< Span ID = "Span1" > </ Span >
< Input Type = "Button" ID = "BTN" Value = "Testgif" Onclick = "Test2 ()" >
< IMG ID = "Imgloading" SRC = "../Images/wait.gif" >

You can see in JS:
Asynchronous:VaR loader1 = new net. contentloader (URL, load, null, "get", strparams );
Or directly load ()
Wait.gif images are stuck until span1.innerhtml is processed.

(PS: My machine has a card effect when I is added to 5000. You can set this value based on your machine until the card ends)

In fact, only the XMLHTTP request is sent with a parameter to set whether to be asynchronous (req. Open (method, URL + "? "+ Params, true), that is to say, only requests can be sent asynchronously. Why do I expect the tasks in the callback function to be asynchronous? I really don't know what I think.
Therefore, the only way for IE to be disconnected is to speed up the code for loading nodes and reduce the time it takes to occupy resources.
Yes. What should I do?
Is it faster to generate HTML on the server page and then directly assign its value to the innerhtml of the tree?
But how to generate HTML? After reading the code of the dhtmlxtree generation tree, we found that every node is dynamically added. The following code is used to extract a line from the tree:
Dhtmlxtreeobject. Prototype. _ drawnewtr = function (htmlobject, node)
{
VaR TR = Document. createelement ('tr ');
VaR TD1 = Document. createelement ('td ');
VaR td2 = Document. createelement ('td ');
Td1.appendchild (document. createtextnode (""));
Td2.colspan = 3;
Td2.appendchild (htmlobject );
Tr. appendchild (TD1); tr. appendchild (td2 );
Return TR;
};

That is to say, I have to generate such HTML in the server page (the innerhtml OF THE Div that is retrieved from the front-end page and assigned to the tree ).
Stay in the future ...... It is a headache.

it is recommended that the tree be placed in a user control to load the user control asynchronously. However, the tree must interact with The ListBox on the right. Put all the following parts of the entire dropdownlist into the user control, but how can we bind the selected IDC resources to The ListBox in the user control (passing parameters can be solved ), how can I return the value selected in ListBox to the page? That is to say, how to obtain the value in ListBox when the midpoint of this selector is determined

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.