Method and device for displaying picture elements

Abstract

The invention provides a method and a device for displaying picture elements, and relates to the technical field of network. The method provided by the invention comprises the following steps: adding a mask layer when initially dragging action of a mouse is intercepted, creating a second picture element corresponding to a dragged first picture element on the mask layer, wherein the second picture element is an icon including content data of the first picture element; acquiring coordinates in a mouse moving procedure, and changing the coordinates of the second picture element along with changing of the coordinates in the mouse moving procedure; hiding the mask layer while bounce of the mouse is intercepted, exchanging the content data of the first picture element with the content data of a third picture element when the mouse is bounced to point the third picture element; and rendering and displaying picture elements which are acquired after an exchanging procedure again. According to the method and device provided by the invention, reflowing times are reduced; namely, the number of elements of position needs to be counted again; therefore, redrawing times are also reduced; an occupancy rate of system resource is reduced; and a use rate of a CPU (central processing unit) is also reduced.

Description

technical field [0001] The present application relates to the field of network technologies, in particular to a method and device for displaying picture elements. Background technique [0002] RIA (Rich Internet Applications) is a rich Internet application with high interactivity, rich user experience and powerful functions. Rich interface elements: RIA technology provides richer interface elements than HTML, dense, fast-response, and graphic-rich picture elements are combined with data models to provide users with a good experience. In RIA, the document element model tree element of the page is generally combined with the page script (Javascript) to make the image element moveable. [0003] In the browser, the rendering process of the page is as follows figure 1 , the browser parses the DOM Tree (document element model tree) from the HTML Source (HTML resource, where HTML is: Hypertext Markup Language Source, Hypertext Markup Language), and parses it from the CSS (Cascadi...

AI Technical Summary

Problems solved by technology

As can be seen from the aforementioned browser rendering process, the content of the document element model tree is placed in the corresponding cascading style sheet position to construct the rendering tree. Then, in the above dragging process, the cascading style sheet position and Its content is dragged together, where the coordinates of CSS change with the coordinates of mouse movement, and the change of the position of the cascading style sheet, according to the rendering rules of the browser, will cause the page to reflow or redraw, and the browser needs to recalculate The new position of this element and all elements after this element in the document element model tree in the browser, and the style rendering is performed based on the new position, the load of calculation and rendering is heavy, the system resource is seriously occupied, and the CPU (Central Processing Unit, central processing device) high usage rate, affecting the normal operation of other programs in the system

Images