Looking for breakthrough ideas for innovation challenges? Try Patsnap Eureka!

Method and system for loading pictures at front end

A picture and picture loading technology, which is applied in the direction of program loading/starting, program control device, user interface execution, etc., can solve the problem of slow picture loading speed, achieve the effect of avoiding page delay effect, reliable design principle, and improving user experience

Inactive Publication Date: 2020-04-10
SUZHOU LANGCHAO INTELLIGENT TECH CO LTD
View PDF0 Cites 0 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

[0006] Aiming at the defects of the above-mentioned existing web front-end picture loading speed in the prior art, the present invention provides a method and system for loading pictures at the front-end to solve the above-mentioned technical problems

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Method and system for loading pictures at front end
  • Method and system for loading pictures at front end
  • Method and system for loading pictures at front end

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0063] like figure 1 As shown, the present invention provides a method for front-end loading pictures, including the following steps:

[0064] S1. Decompose each image file into a two-dimensional array on the web server side, and perform data cutting, and divide the two-dimensional array into several array sets;

[0065] S2. Record the image features of each array set into the dom node of the corresponding image file;

[0066] S3. When the user logs in to the system through the web client, it is judged whether there is image data in the dom node of the current page;

[0067] If yes, get the dom node of the image file to be loaded;

[0068] S4. Take out the array set and image features from the dom node, perform data reconstruction, reconstruct the data set into a two-dimensional array, and then restore the two-dimensional array to an image file to realize image loading.

Embodiment 2

[0070] like figure 2 As shown, the present invention provides a method for front-end loading pictures, including the following steps:

[0071] S1. Decompose each image file into a two-dimensional array on the web server side, and perform data cutting, and divide the two-dimensional array into several array sets; the specific steps are as follows:

[0072] S11. Decomposing each image file into a two-dimensional array at the web server side according to the pixel unit position offset of the image file;

[0073] S12. Set image pixel value difference threshold V;

[0074] S13. Traverse the two-dimensional array of image files, divide the two-dimensional array of image pixel units with difference less than the image pixel value difference threshold V into an array set, and generate several array sets; the specific steps are as follows:

[0075] S131. Traverse the two-dimensional array of the image file from left to right and from top to bottom, and intercept the N*N array, where...

Embodiment 3

[0091] like image 3 As shown, the present invention provides a system for front-end loading pictures, including:

[0092] The array set generation module 1 is used to decompose each image file into a two-dimensional array at the web server end, and perform data cutting, and divide the two-dimensional array into several array sets; the array set generation module (1) includes:

[0093] The two-dimensional array decomposition unit 1.1 is used to decompose each image file into a two-dimensional array according to the pixel unit position offset of the image file at the web server;

[0094] The pixel difference threshold setting unit 1.2 is used to set the image pixel value difference threshold V;

[0095] The array set generation unit 1.3 is used to traverse the two-dimensional array of the image file, divide the two-dimensional array of image pixel units whose difference is less than the image pixel value difference threshold V into an array set, and generate several array sets...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

PUM

No PUM Login to View More

Abstract

The invention provides a front-end picture loading method and system, and the method comprises the following steps: S1, enabling each image file to be decomposed into a two-dimensional array at a webserver, executing the data cutting, and enabling the two-dimensional array to be divided into a plurality of array sets; s2, recording the image features of each array set into dom nodes of a corresponding image file; s3, when a user logs in the system through the web client, judging whether image data exists in the dom node of the current page or not; if so, obtaining a dom node of the to-be-loaded image file; and S4, taking out the array set and the image features from the dom node, executing data reconstruction, reconstructing the data set into a two-dimensional array, and restoring the two-dimensional array into an image file to realize image loading. When the picture is loaded, only a small amount of data needs to be loaded, so that the page delay effect caused by loading a large amount of pictures is effectively avoided, a user can enjoy extremely high loading speed, and the user experience is well improved.

Description

technical field [0001] The invention belongs to the technical field of data center resource management, and in particular relates to a method and system for front-end loading pictures. Background technique [0002] B / S is the abbreviation of Browser / Server, browser / server mode. [0003] AJAX is the abbreviation of Async Javascript And XML, an interactive web application development technology. [0004] With the rapid development of modern web browser technology, especially the wide application of AJAX technology, the Browser / Server structure is used more and more, and the web front-end performance optimization problem is also becoming more and more prominent, especially when users visit and browse Browser pages always encounter the situation that the loading of pictures is not timely. To solve this problem, a better way is to preload the pictures. The pictures are preloaded into the browser, and the visitors can visit the webpage smoothly and obtain a better user experience...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

Application Information

Patent Timeline
no application Login to View More
IPC IPC(8): G06F9/451G06F9/445
CPCG06F9/445G06F9/451
Inventor 马聪张建刚
Owner SUZHOU LANGCHAO INTELLIGENT TECH CO LTD
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Patsnap Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Patsnap Eureka Blog
Learn More
PatSnap group products

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic, Popular Technical Reports.

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap|About US| Contact US: help@patsnap.com