CN112364279A - 图片加载方法、装置 - Google Patents

图片加载方法、装置 Download PDF

Info

Publication number
CN112364279A
CN112364279A CN202110046009.6A CN202110046009A CN112364279A CN 112364279 A CN112364279 A CN 112364279A CN 202110046009 A CN202110046009 A CN 202110046009A CN 112364279 A CN112364279 A CN 112364279A
Authority
CN
China
Prior art keywords
loaded
state
picture
queue
page element
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202110046009.6A
Other languages
English (en)
Other versions
CN112364279B (zh
Inventor
崔宝秋
吴华
谢康
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Xiaomi Mobile Software Co Ltd
Original Assignee
Beijing Xiaomi Mobile Software Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Xiaomi Mobile Software Co Ltd filed Critical Beijing Xiaomi Mobile Software Co Ltd
Priority to CN202110046009.6A priority Critical patent/CN112364279B/zh
Publication of CN112364279A publication Critical patent/CN112364279A/zh
Application granted granted Critical
Publication of CN112364279B publication Critical patent/CN112364279B/zh
Priority to KR1020210082183A priority patent/KR20220103005A/ko
Priority to JP2021106351A priority patent/JP7209046B2/ja
Priority to EP21185594.5A priority patent/EP4030283B1/en
Priority to US17/382,157 priority patent/US11762675B2/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/954Navigation, e.g. using categorised browsing
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0483Interaction with page-structured environments, e.g. book metaphor
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485Scrolling or panning
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/445Program loading or initiating
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/46Multiprogramming arrangements
    • G06F9/48Program initiating; Program switching, e.g. by interrupt
    • G06F9/4806Task transfer initiation or dispatching
    • G06F9/4843Task transfer initiation or dispatching by program, e.g. task dispatcher, supervisor, operating system
    • G06F9/4881Scheduling strategies for dispatcher, e.g. round robin, multi-level priority queues

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Radar, Positioning & Navigation (AREA)
  • Remote Sensing (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

本公开关于一种图片加载方法、装置,包括:获取目标页面元素;获取目标页面元素的运动状态;如果目标页面元素的运动状态为滚动状态,则获取目标页面元素所承载的待加载图片,并将待加载图片加入至待加载队列,其中,待加载队列用于根据目标页面元素的运动状态变化对待加载图片进行监控,并在目标页面元素的运动状态变为非滚动状态时将待加载图片添加至加载队列进行下载。由此,可以根据图片的滚动状态来选择是否加载,如果处于滚动状态,则不直接下载,而是将其添加至待下载队列。例如,对待下载队列之中的待下载图片进行监控,在其滚动状态改变时将其移入下载队列进行下载,从而可以减小不必要的下载,降低流量消耗,以及对内存和CPU资源的占用。

Description

图片加载方法、装置
技术领域
本公开涉及页面技术领域,尤其涉及一种图片加载方法、装置、电子设备及存储介质。
背景技术
在页面进行渲染时,需要不断的根据页面内容加载图片,并缓存。然而随着页面内容的不断丰富,需要加载的图片也越来越多,因此对智能设备,例如移动终端的资源消耗也越来越大。
然而,在页面加载过程中,会存在用户持续滚动的使用情况,目前针对这种情况依然是将图片全部进行加载,导致对智能设备造成了承重负担,降低了智能设备的运行效率。例如,在页面之中进行图片滚动时,会存在不断地将图片对应的元素在渲染树上加载并移除,从而导致该元素对应的图片被不断地在缓存之中加载和移除,不仅浪费了缓存资源,同时也因为不断进行图片下载和编解码操作,导致设备的CPU资源占用过大,从而导致电子设备的显示页面被用户执行滚动操作时,容易出现显示卡顿以及显著增加功耗的问题。
发明内容
本公开提供一种图片加载方法、装置,以至少解决相关技术中由于页面滚动导致的缓存资源浪费,以及电子设备出现显示卡顿和显著增加功耗的问题。本公开的技术方案如下:
根据本公开实施例的第一方面,提供一种图片加载方法,包括:获取目标页面元素;获取所述目标页面元素的运动状态;如果所述目标页面元素的运动状态为滚动状态,则获取所述目标页面元素所承载的待加载图片,并将所述待加载图片加入至待加载队列,其中,所述待加载队列用于根据所述目标页面元素的运动状态变化对所述待加载图片进行监控,并在所述目标页面元素的运动状态变为非滚动状态时将所述待加载图片添加至加载队列进行下载。
在本公开的一个实施例之中,还包括:如果所述目标页面元素的运动状态为非滚动状态,则将所述待加载图片加入至所述加载队列。
在本公开的一个实施例之中,还包括:获取所述目标页面元素的挂载状态,其中,如果所述挂载状态为已挂载状态且所述运动状态为所述非滚动状态,则将所述待加载图片加入至所述加载队列,如果所述挂载状态为已挂载状态,且所述运动状态为所述滚动状态,则将所述待加载图片加入至所述待加载队列。
在本公开的一个实施例之中,如果所述挂载状态为未挂载状态,则不将所述待加载图片加入至所述待加载队列或加载队列。
在本公开的一个实施例之中,还包括:获取所述目标页面元素的位置状态,其中,如果根据所述目标页面元素的位置状态判断所述页面元素处于电子设备的显示空间之内,且所述运动状态为非滚动状态,则所述待加载图片加入至加载队列;如果根据所述目标页面元素的位置状态判断所述页面元素处于电子设备的显示空间之内,且所述运动状态为滚动状态,则所述待加载图片加入至待加载队列。
在本公开的一个实施例之中,还包括:如果根据所述目标页面元素的位置状态判断所述页面元素处于电子设备的显示空间之外,则不将所述待加载图片加入至所述待加载队列或所述加载队列。
在本公开的一个实施例之中,还包括:如果所述目标页面元素的状态为非挂载状态,则将所述待加载图片从所述待加载队列之中移除。
根据本公开实施例的第二方面,还提供一种图片加载装置,包括:获取模块,用于获取目标页面元素;运动状态获取模块,用于获取承载所述目标页面元素的运动状态;加载队列管理模块,用于在所述目标页面元素的运动状态为滚动状态时,获取所述目标页面元素所承载的待加载图片,并将所述待加载图片加入至待加载队列,其中,所述待加载队列用于根据所述目标页面元素的运动状态变化对所述待加载图片进行监控,并在所述目标页面元素的运动状态变为非滚动状态时将所述待加载图片添加至加载队列进行下载。
在本公开的一个实施例之中,所述加载队列管理模块,还用于在所述目标页面元素的运动状态为非滚动状态时,将所述待加载图片加入至加载队列。
在本公开的一个实施例之中,所述加载队列管理模块,还用于获取所述目标页面元素的挂载状态,其中,如果所述挂载状态为已挂载状态且所述运动状态为所述非滚动状态,则将所述待加载图片加入至所述加载队列,如果所述挂载状态为已挂载状态,且所述运动状态为所述滚动状态,则将所述待加载图片加入至所述待加载队列
在本公开的一个实施例之中,所述加载队列管理模块,还用于在所述挂载状态为未挂载状态时,不将所述待加载图片加入至所述待加载队列或加载队列。
在本公开的一个实施例之中,所述加载队列管理模块,还用于获取所述目标页面元素的位置状态,其中,如果根据所述目标页面元素的位置状态判断所述目标页面元素处于电子设备的显示空间之内,且所述运动状态为非滚动状态,则所述待加载图片加入至加载队列,如果根据所述目标页面元素的位置状态判断所述目标页面元素处于电子设备的显示空间之内,且所述运动状态为滚动状态,则所述待加载图片加入至待加载队列。
在本公开的一个实施例之中,所述加载队列管理模块,还用于在根据所述目标页面元素的位置状态判断所述目标页面元素处于电子设备的显示空间之外时,不将所述待加载图片加入至所述待加载队列或加载队列。
运动状态获取模块在本公开的一个实施例之中,所述加载队列管理模块,还用于在所述目标页面元素的状态为非挂载状态时,将所述待加载图片从所述待加载队列之中移除。
根据本公开实施例的第三方面,还提供一种非临时性计算机可读存储介质,当所述存储介质中的指令由电子设备的处理器执行时,使得处理器能够执行如上所述的图片加载方法。
根据本公开实施例的第四方面,还提供一种电子设备,包括:处理器;用于存储所述处理器可执行指令的存储器;其中,所述处理器被配置为执行所述指令,以实现如上所述的图片加载方法。
本公开的实施例提供的技术方案至少带来以下有益效果:
本公开的实施例可以根据图片的滚动状态来选择是否加载,如果处于滚动状态时,则不直接下载,而是将其添加至待下载队列,并对待下载队列之中的待下载图片进行监控。例如,对待下载队列之中的待下载图片进行监控,在其滚动状态改变时将其移入下载队列进行下载,从而可以减小不必要的下载,进一步降低流量消耗,以及对内存和CPU资源的占用。
应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本公开的实施例,并与说明书一起用于解释本公开的原理,并不构成对本公开的不当限定。
图1为本公开实施例的一种图片加载方法的流程图。
图2为本公开一个实施例的获取目标页面元素的示意图。
图3为本公开一个实施例的待加载队列和加载队列的示意图。
图4为本公开实施例的图片加载装置结构图。
图5为根据本公开一示例性实施例示出的一种电子设备框图。
具体实施方式
为了使本领域普通人员更好地理解本公开的技术方案,下面将结合附图,对本公开实施例中的技术方案进行清楚、完整地描述。
需要说明的是,本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
在本公开的实施例之中,可以为每个图片设置上下文,其中,该上下文用于标记图片的状态,如滚动状态,或者图片与视图之间的位置关系状态,例如图片是在视图内,还是处于视图外。并可以根据上下文对图片在渲染树上进行上载或下载,例如,如果该图片目前处于滚动状态,则不加载该图片,直至停止滚动时再加载,这样可以避免该图片的无效加载。
如图1所示,为本公开实施例的一种图片加载方法的流程图。该方法包括以下步骤:
步骤S110,获取目标页面元素。
在本公开的实施例之中,对于一个页面来说,该页面对应有布局树。在布局和渲染时,通过该布局树和对应的CSS(Cascading Style Sheets,层叠样式表)生成对应的渲染树,之后再根据渲染树生成相应的页面。该布局树包括多个节点,其中,每个节点对应一个页面元素。每个节点具有各自的配置信息,该配置信息用于限定该节点(即对应的页面元素)的位置,大小尺寸等参数。
在本公开的实施例之中,目标页面元素是指进入到当前列表视口的页面元素。具体而言,以智能设备为智能电视为例进行描述。如图2所示,为本公开一个实施例的获取目标页面元素的示意图。其中,以智能电视为例进行描述。该智能电视200具有操作列表210和显示区域220,页面列表210之中包括多个页面元素,每个页面元素构成一个操作项。操作列表210具有当前列表视口230,其中,列表视口230具有缓冲区231。操作列表210包括操作项21至操作项25。从图中可以看出,操作列表210较长,操作列表210之中包括多个操作项。由于操作列表210较长,因此对于智能电视200来说,无法完全显示,因此使用列表视口230(Viewport)对操作列表210的可见区域进行显示,该列表视口230就是指可以通过智能电视200展现的部分。在本公开的一个实施例之中,当某个操作项(例如操作项25)进入到缓冲区231时,意味着该操作项25已准备进入到列表视口230之中进行加载,因此需要对缓冲区231之中的操作项进行布局和渲染。因此,在本公开的一个实施例之中,可以将进入到缓冲区之中的页面元素作为目标页面元素。当然在本公开的其他实施例之中,还可以将进入到当前列表视口的页面元素作为目标页面元素。
在本公开的实施例之中,目标页面元素可以为一个,也可以为多个,由进入到缓冲区的页面元素的数量决定。
步骤S130,获取目标页面元素的运动状态。
在本公开的实施例之中,目标页面元素之中承载有图片,在目标页面元素渲染时就需要下载该图片,并加载到对应的目标页面元素之中。在本公开的实施例之中,并不直接将目标页面元素之中的图片进行下载,而是要根据目标页面元素的运动状态设置待加载图片的运动状态标签。在本公开的实施例之中,可以为每个目标元素对应的待加载图片设置标签,例如运动状态标签,位置状态标签等等。该待加载图片的标签是由对应的目标页面元素的运动状态决定的,例如目标页面元素的运动状态为滚动状态,则将其所承载的待加载图片的标签设置为滚动状态标签;反之,如果目标页面元素的运动状态为非滚动状态,则将其所承载的待加载图片的标签设置为非滚动状态标签。
步骤S150,如果目标页面元素的运动状态为非滚动状态,则将目标页面元素所承载的待加载图片加入至加载队列。
在本公开的实施例之中,如果承载该待加载图片的页面元素的运动状态为非滚动状态,则说明该待加载图片为非滚动状态,从而说明目前用户处于正常浏览的过程,因此将该待加载图片加入到加载队列之中进行正常下载。
步骤S170,如果目标页面元素的运动状态为滚动状态,则获取目标页面元素所承载的待加载图片,并将待加载图片加入至待加载队列,其中,待加载队列用于根据目标页面元素的运动状态变化对待加载图片进行监控,并在目标页面元素的运动状态变为非滚动状态时将待加载图片添加至加载队列进行下载。
在本公开的实施例之中,如果根据待加载图片的运动状态标签判断承载该目标页面元素为滚动状态,则说明该待加载图片为滚动状态,此时用户在不断地滚动页面,对于这种情况,则将待加载图片加入到待加载队列之中,进一步进行观察。在本公开的一个实施例之中,可以将该目标页面元素进行渲染,但是并不加载其中的图片,从用户的角度来看,可以获知该目标页面元素的外形,但是由于其处于滚动状态,因此看不到其内部的图片。
在本公开的实施例之中,页面的管理器维护有待加载队列和加载队列。其中,加载队列之中包括多个加载任务,对于该加载队列之中的加载任务,页面管理器依次对加载队列之中的待加载图片进行下载。然而对于待加载队列之中的待加载图片而言,并非是直接进行下载,而是按照预设的周期对待加载队列之中的待加载图片进行监控。
需要说明的是,在本公开的实施例之中,对于处于滚动状态的待加载图片并非是完全不进行加载,而是要对其状态进行监控。如果待加载图片对应的标签发生了变化,则需要将其从待加载队列转移至加载队列进行加载,或者将待加载图片从待加载队列之中删除。
具体而言,作为本公开的一个实施例,按照预设的周期对待加载队列之中的待加载图片的标签进行监控,例如,如果该滚动状态标签从滚动状态切换至非滚动状态,则说明用户已经停止了滚动,并且当前的页面停留在该待加载图片所对应的页面元素,因此将该待加载图片从待加载队列之中移入加载队列之中进行加载。反之,如果该待加载图片对应的滚动状态标签还处于滚动状态,则将其继续保留在待加载队列之中。
在本公开的另一个实施例之中,如果待加载队列之中的待加载图片对应的页面元素被卸载,则该页面元素可能已被用户划过,因此将该页面元素对应的待加载图片从待加载队列之中删除。
如图3所示,为本公开一个实施例的待加载队列和加载队列的示意图。其中,加载队列310之中包括多个待加载图片311,待加载队列320之中包括多个待加载图片321。在本公开的一个实施例之中,按照预设周期对待加载队列之中的待加载图片所对应的页面元素的状态进行查询,即查询该待加载图片的标签。如果该待加载图片对应标签的滚动状态发生变化,例如从滚动状态标签变为非滚动状态标签,则将该待加载图片从待加载队列移入加载队列之中。
在本公开的一个实施例之中,还可以获取目标页面元素的挂载状态,其中,如果目标页面元素的挂载状态为已挂载状态,且运动状态为非滚动状态,则将待加载图片加入至加载队列。在该实施例之中,如果目标页面元素已经处于挂载状态,且运动状态为非滚动状态,则说明用户在正常浏览,因此将该待加载图片加入到加载队列,进行正常的下载。反之,如果目标页面元素的挂载状态为已挂载状态,且运动状态为滚动状态,则将待加载图片加入至待加载队列。在该实施例之中,如果目标页面元素处于挂载状态,但是运动状态为滚动状态,则说明用户正在滚动页面,因此不对该待加载图片进行直接下载,而是将其放入至待加载队列进行监控,当其滚动状态发生变化时,则再将其移入加载队列进行下载。在本公开的其他实施例之中,如果目标页面元素的挂载状态为非挂载状态,则对该目标页面元素不进行处理,即,既不将待加载图片加入至下载队列,也不将其加入至待下载队列。
在本公开的一个实施例之中,还可以获取目标页面元素的位置状态,以及根据该位置状态生成位置状态标签。其中,如果根据目标页面元素的位置状态判断目标页面元素处于电子设备的显示空间之内,例如位于手机或者数字电视的视图之中,则说明用户将要浏览该目标页面元素。此时,进一步检测页面元素的运动状态,如果运动状态为非滚动状态,则说明用户处于正常浏览状态,因此将待加载图片加入至加载队列,进行正常下载。反之,如果根据目标页面元素的位置状态判断页面元素处于电子设备的显示空间之内,但是运动状态为滚动状态,则待加载图片加入至待加载队列,并对待加载队列进行监控。
在本公开的一个实施例之中,如果根据目标页面元素的位置状态判断目标页面元素处于电子设备的显示空间之外,则说明目前还未浏览到该目标页面元素或者该目标页面元素已经被划过当前列表视口,因此不将待加载图片加入至待加载队列,也不将其加入至加载队列。在本公开的实施例之中,待加载队列之中的待加载图片是指位于电子设备的视图之中的目标页面元素所承载的图片(处于滚动状态)。
在本公开的一个实施例之中,在进行页面渲染时,继续检查待加载队列之中待加载图片的对应页面元素的运动状态。如果对应页面元素的运动状态从滚动状态切换至非滚动状态,则说明用户已经停止了滚动,正在正常浏览,因此将待加载图片从待加载队列移入加载队列,进行正常下载并加载到对应的页面元素之中。
在本公开的一个实施例之中,如果目标页面元素的状态为非挂载状态,则将待加载图片从待加载队列之中移除。
本公开的实施例可以根据图片的运动状态标签来选择是否加载,如果处于滚动状态时,则不直接下载,而是将其添加至待下载队列,并对待下载队列之中的待下载图片进行监控,在其滚动状态改变时将其移入下载队列进行下载,从而可以减小不必要的下载,进一步降低流量消耗,以及对内存和CPU资源的占用。
如图4所示,为本公开实施例的图片加载装置结构图。该图片加载装置400包括获取模块410、运动状态获取模块420和加载队列管理模块430。其中,获取模块410用于获取目标页面元素。运动状态获取模块420用于获取承载目标页面元素的运动状态。加载队列管理模块430用于在目标页面元素的运动状态为滚动状态时,获取目标页面元素所承载的待加载图片,并将待加载图片加入至待加载队列,其中,待加载队列用于根据目标页面元素的运动状态变化对待加载图片进行监控,并在目标页面元素的运动状态变为非滚动状态时将待加载图片添加至加载队列进行下载。
在本公开的一个实施例之中,加载队列管理模块430还用于在目标页面元素的运动状态为非滚动状态时,将待加载图片加入至加载队列。
在本公开的一个实施例之中,加载队列管理模块430还用于获取目标页面元素的挂载状态,其中,如果目标页面元素的挂载状态为已挂载,且运动状态为非滚动状态,则将待加载图片加入至加载队列,如果目标页面元素的挂载状态为已挂载,且运动状态为滚动状态,则将待加载图片加入至待加载队列。在本公开的一个实施例之中,如果挂载状态为未挂载,则不将待加载图片加入至待加载队列和加载队列。
在本公开的一个实施例之中,加载队列管理模块430还用于获取目标页面元素的位置状态,其中,如果根据目标页面元素的位置状态判断目标页面元素处于电子设备的显示空间之内,且运动状态为非滚动状态,则待加载图片加入至加载队列,如果根据目标页面元素的位置状态判断目标页面元素处于电子设备的显示空间之内,且运动状态为滚动状态,则待加载图片加入至待加载队列。
在本公开的一个实施例之中,加载队列管理模块430还用于在根据目标页面元素的位置状态判断目标页面元素处于电子设备的显示空间之外时,不将待加载图片加入至待加载队列。
在本公开的一个实施例之中,加载队列管理模块430还用于在进行页面渲染时,检查待加载队列之中待加载图片的对应页面元素的运动状态,并在对应页面元素的运动状态从滚动状态切换至非滚动状态时,将待加载图片从待加载队列移入加载队列。
在本公开的一个实施例之中,加载队列管理模块430还用于在目标页面元素的挂载状态为非挂载状态时,将待加载图片从待加载队列之中移除。
根据本公开实施例的第三方面,还提供一种非临时性计算机可读存储介质,当所述存储介质中的指令由电子设备的处理器执行时,使得处理器能够执行如上所述的图片加载方法。
根据本公开实施例的第四方面,还提供一种电子设备,包括:处理器;用于存储所述处理器可执行指令的存储器;其中,所述处理器被配置为执行所述指令,以实现如上所述的图片加载方法。
为了实现上述实施例,本公开还提出了一种存储介质。
其中,当存储介质中的指令由电子设备的处理器执行时,使得电子设备能够执行如上所述的方法。
为了实现上述实施例,本公开还提供一种计算机程序产品。
其中,该计算机程序产品由电子设备的处理器执行时,使得电子设备能够执行如上所述的方法。
图5是根据一示例性实施例示出的一种电子设备框图。图5示出的电子设备仅仅是一个示例,不应对本公开实施例的功能和使用范围带来任何限制。
如图5所示,电子设备1000包括处理器111,其可以根据存储在只读存储器(ROM,Read Only Memory)112中的程序或者从存储器116加载到随机访问存储器(RAM,RandomAccess Memory)113中的程序而执行各种适当的动作和处理。在RAM 113中,还存储有电子设备1000操作所需的各种程序和数据。处理器111、ROM 112以及RAM 113通过总线114彼此相连。输入/输出(I/O,Input / Output)接口115也连接至总线114。
以下部件连接至I/O接口115:包括硬盘等的存储器116;以及包括诸如LAN(局域网,Local Area Network)卡、调制解调器等的网络接口卡的通信部分117,通信部分117经由诸如因特网的网络执行通信处理;驱动器118也根据需要连接至I/O接口115。
特别地,根据本公开的实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本公开的实施例包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信部分117从网络上被下载和安装。在该计算机程序被处理器111执行时,执行本公开的方法中限定的上述功能。
在示例性实施例中,还提供了一种包括指令的存储介质,例如包括指令的存储器,上述指令可由电子设备1000的处理器111执行以完成上述方法。可选地,存储介质可以是非临时性计算机可读存储介质,例如,所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。
在本公开中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中,计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:无线、电线、光缆、RF等等,或者上述的任意合适的组合。
本公开的实施例可以根据图片的滚动状态来选择是否加载,如果处于滚动状态时,则不直接下载,而是将其添加至待下载队列。例如,对待下载队列之中的待下载图片进行监控,在其滚动状态改变时将其移入下载队列进行下载,从而可以减小不必要的下载,进一步降低流量消耗,以及对内存和CPU资源的占用。
本领域技术人员在考虑说明书及实践这里公开的发明后,将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化,这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的,本公开的真正范围和精神由下面的权利要求指出。
应当理解的是,本公开并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (16)

1.一种图片加载方法,其特征在于,包括:
获取目标页面元素;
获取所述目标页面元素的运动状态;
如果所述目标页面元素的运动状态为滚动状态,则获取所述目标页面元素所承载的待加载图片,并将所述待加载图片加入至待加载队列,其中,所述待加载队列用于根据所述目标页面元素的运动状态变化对所述待加载图片进行监控,并在所述目标页面元素的运动状态变为非滚动状态时将所述待加载图片添加至加载队列进行下载。
2.如权利要求1所述的方法,其特征在于,还包括:
如果所述目标页面元素的运动状态为非滚动状态,则将所述待加载图片加入至所述加载队列。
3.如权利要求1或2所述的方法,其特征在于,还包括:
获取所述目标页面元素的挂载状态,其中,
如果所述挂载状态为已挂载状态且所述运动状态为所述非滚动状态,则将所述待加载图片加入至所述加载队列,如果所述挂载状态为已挂载状态,且所述运动状态为所述滚动状态,则将所述待加载图片加入至所述待加载队列。
4.如权利要求3所述的方法,其特征在于,如果所述挂载状态为未挂载状态,则不将所述待加载图片加入至所述待加载队列或加载队列。
5.如权利要求1或2所述的方法,其特征在于,还包括:
获取所述目标页面元素的位置状态,其中,
如果根据所述目标页面元素的位置状态判断所述页面元素处于电子设备的显示空间之内,且所述运动状态为非滚动状态,则所述待加载图片加入至加载队列;
如果根据所述目标页面元素的位置状态判断所述页面元素处于电子设备的显示空间之内,且所述运动状态为滚动状态,则所述待加载图片加入至待加载队列。
6.如权利要求5所述的方法,其特征在于,还包括:
如果根据所述目标页面元素的位置状态判断所述页面元素处于电子设备的显示空间之外,则不将所述待加载图片加入至所述待加载队列或所述加载队列。
7.如权利要求1所述的方法,其特征在于,还包括:
如果所述目标页面元素的状态为非挂载状态,则将所述待加载图片从所述待加载队列之中移除。
8.一种图片加载装置,其特征在于,包括:
获取模块,用于获取目标页面元素;
运动状态获取模块,用于获取承载所述目标页面元素的运动状态;
加载队列管理模块,用于在所述目标页面元素的运动状态为滚动状态时,获取所述目标页面元素所承载的待加载图片,并将所述待加载图片加入至待加载队列,其中,所述待加载队列用于根据所述目标页面元素的运动状态变化对所述待加载图片进行监控,并在所述目标页面元素的运动状态变为非滚动状态时将所述待加载图片添加至加载队列进行下载。
9.如权利要求8所述的装置,其特征在于,所述加载队列管理模块,还用于在所述目标页面元素的运动状态为非滚动状态时,将所述待加载图片加入至加载队列。
10.如权利要求8所述的装置,其特征在于,所述加载队列管理模块,还用于获取所述目标页面元素的挂载状态,其中,如果所述挂载状态为已挂载状态且所述运动状态为所述非滚动状态,则将所述待加载图片加入至所述加载队列,如果所述挂载状态为已挂载状态,且所述运动状态为所述滚动状态,则将所述待加载图片加入至所述待加载队列。
11.如权利要求10所述的装置,其特征在于,所述加载队列管理模块,还用于在所述挂载状态为未挂载状态时,不将所述待加载图片加入至所述待加载队列或加载队列。
12.如权利要求8所述的装置,其特征在于,所述加载队列管理模块,还用于获取所述目标页面元素的位置状态,其中,如果根据所述目标页面元素的位置状态判断所述目标页面元素处于电子设备的显示空间之内,且所述运动状态为非滚动状态,则所述待加载图片加入至加载队列,如果根据所述目标页面元素的位置状态判断所述目标页面元素处于电子设备的显示空间之内,且所述运动状态为滚动状态,则所述待加载图片加入至待加载队列。
13.如权利要求12所述的装置,其特征在于,所述加载队列管理模块,还用于在根据所述目标页面元素的位置状态判断所述目标页面元素处于电子设备的显示空间之外时,不将所述待加载图片加入至所述待加载队列或加载队列。
14.如权利要求8所述的装置,其特征在于,所述加载队列管理模块,还用于在所述目标页面元素的状态为非挂载状态时,将所述待加载图片从所述待加载队列之中移除。
15.一种非临时性计算机可读存储介质,当所述存储介质中的指令由电子设备的处理器执行时,使得所述处理器能够执行如权利要求1至7中任一项所述的图片加载方法。
16.一种电子设备,其特征在于,包括:
处理器;
用于存储所述处理器可执行指令的存储器;
其中,所述处理器被配置为执行所述指令,以实现如权利要求1至7中任一项所述的图片加载方法。
CN202110046009.6A 2021-01-14 2021-01-14 图片加载方法、装置 Active CN112364279B (zh)

Priority Applications (5)

Application Number Priority Date Filing Date Title
CN202110046009.6A CN112364279B (zh) 2021-01-14 2021-01-14 图片加载方法、装置
KR1020210082183A KR20220103005A (ko) 2021-01-14 2021-06-24 이미지 로딩 방법 및 장치
JP2021106351A JP7209046B2 (ja) 2021-01-14 2021-06-28 画像ロード方法、装置
EP21185594.5A EP4030283B1 (en) 2021-01-14 2021-07-14 Method and apparatus for loading picture
US17/382,157 US11762675B2 (en) 2021-01-14 2021-07-21 Method and apparatus for loading picture

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110046009.6A CN112364279B (zh) 2021-01-14 2021-01-14 图片加载方法、装置

Publications (2)

Publication Number Publication Date
CN112364279A true CN112364279A (zh) 2021-02-12
CN112364279B CN112364279B (zh) 2021-04-27

Family

ID=74535004

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110046009.6A Active CN112364279B (zh) 2021-01-14 2021-01-14 图片加载方法、装置

Country Status (5)

Country Link
US (1) US11762675B2 (zh)
EP (1) EP4030283B1 (zh)
JP (1) JP7209046B2 (zh)
KR (1) KR20220103005A (zh)
CN (1) CN112364279B (zh)

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101706821A (zh) * 2009-12-10 2010-05-12 中兴通讯股份有限公司 基于标签的移动互联网页面设计系统及方法
CN103034723A (zh) * 2012-12-14 2013-04-10 北京奇虎科技有限公司 页面呈现方法及设备
US20140019850A1 (en) * 2012-07-12 2014-01-16 Adobe Systems Inc. Method and apparatus for selective synchronization of a display layout
CN104050172A (zh) * 2013-03-12 2014-09-17 腾讯科技(深圳)有限公司 网页图片加载方法和系统
US20150193108A1 (en) * 2010-07-30 2015-07-09 Jian Li Drag and Drop Downloading of Content Referenced by Displayed Elements
CN104951317A (zh) * 2014-03-26 2015-09-30 北京奇虎科技有限公司 图片加载装置及方法
CN110619102A (zh) * 2019-07-08 2019-12-27 苏宁云计算有限公司 一种页面元素的监听的方法及装置
CN111259284A (zh) * 2018-11-30 2020-06-09 阿里巴巴集团控股有限公司 页面懒加载的方法和装置、存储介质和处理器

Family Cites Families (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7667719B2 (en) * 2006-09-29 2010-02-23 Amazon Technologies, Inc. Image-based document display
US7930646B2 (en) 2007-10-19 2011-04-19 Microsoft Corporation Dynamically updated virtual list view
US20090288035A1 (en) * 2008-05-15 2009-11-19 Microsoft Corporation Scrollable views in a client/server application
JP5674779B2 (ja) * 2010-06-03 2015-02-25 パナソニック インテレクチュアル プロパティ コーポレーション オブアメリカPanasonic Intellectual Property Corporation of America スクロール装置、スクロール方法、スクロールプログラムおよび集積回路
US8601052B2 (en) * 2010-10-04 2013-12-03 Qualcomm Incorporated System and method of performing domain name server pre-fetching
US9529866B2 (en) * 2010-12-20 2016-12-27 Sybase, Inc. Efficiently handling large data sets on mobile devices
CN102591963A (zh) * 2011-12-30 2012-07-18 奇智软件(北京)有限公司 网页内容加载控制方法及装置
US9183319B2 (en) * 2012-10-17 2015-11-10 Cloudflare, Inc. Method and apparatus for automatically optimizing the loading of images in a cloud-based proxy service
CN103853729B (zh) * 2012-11-29 2019-03-26 腾讯科技(深圳)有限公司 页面加载方法及其系统
CN104423839A (zh) * 2013-08-30 2015-03-18 中兴通讯股份有限公司 浏览器资源显示方法和装置
CN107241639A (zh) * 2017-05-05 2017-10-10 广州优视网络科技有限公司 预加载视频的方法、设备、视频播放器、电子设备
US11320981B2 (en) * 2018-01-16 2022-05-03 Citrix Systems, Inc Friendly finite scrolling for theme data pagination
US10613735B1 (en) * 2018-04-04 2020-04-07 Asana, Inc. Systems and methods for preloading an amount of content based on user scrolling
CN111125575A (zh) 2018-10-31 2020-05-08 北京国双科技有限公司 网页数据处理方法和装置
CN111752861A (zh) 2020-06-28 2020-10-09 中国平安财产保险股份有限公司 应用多级缓存方法、装置、客户端及存储介质

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101706821A (zh) * 2009-12-10 2010-05-12 中兴通讯股份有限公司 基于标签的移动互联网页面设计系统及方法
US20150193108A1 (en) * 2010-07-30 2015-07-09 Jian Li Drag and Drop Downloading of Content Referenced by Displayed Elements
US20140019850A1 (en) * 2012-07-12 2014-01-16 Adobe Systems Inc. Method and apparatus for selective synchronization of a display layout
CN103034723A (zh) * 2012-12-14 2013-04-10 北京奇虎科技有限公司 页面呈现方法及设备
CN104050172A (zh) * 2013-03-12 2014-09-17 腾讯科技(深圳)有限公司 网页图片加载方法和系统
CN104951317A (zh) * 2014-03-26 2015-09-30 北京奇虎科技有限公司 图片加载装置及方法
CN111259284A (zh) * 2018-11-30 2020-06-09 阿里巴巴集团控股有限公司 页面懒加载的方法和装置、存储介质和处理器
CN110619102A (zh) * 2019-07-08 2019-12-27 苏宁云计算有限公司 一种页面元素的监听的方法及装置

Also Published As

Publication number Publication date
CN112364279B (zh) 2021-04-27
KR20220103005A (ko) 2022-07-21
EP4030283A1 (en) 2022-07-20
JP2022109211A (ja) 2022-07-27
US20220222092A1 (en) 2022-07-14
EP4030283B1 (en) 2024-05-01
JP7209046B2 (ja) 2023-01-19
US11762675B2 (en) 2023-09-19

Similar Documents

Publication Publication Date Title
CN110096660B (zh) 用于加载页面图片的方法、装置和电子设备
EP2224351A1 (en) method for use in association with a multi-tab interpretation and rendering function
US20140222947A1 (en) Method and apparatus for browsings webpages, and storage medium
CN104462283A (zh) 在移动终端中进行网页元素请求的方法、装置和客户端
US20140325026A1 (en) Intelligent adaptation of mobile applications based on constraints and contexts
CN113589991A (zh) 一种文本输入方法、装置、电子设备和存储介质
CN111258800A (zh) 一种页面处理方法、装置和电子设备
EP3506599A1 (en) Method for synchronizing contact information, apparatus, medium, electronic device and system
CN113626113B (zh) 一种页面渲染方法和装置
CN112364279B (zh) 图片加载方法、装置
CN108572985B (zh) 一种页面显示方法及装置
CN110717126A (zh) 页面浏览方法、装置、电子设备及计算机可读存储介质
CN115470427A (zh) 页面加载方法、装置、设备以及存储介质
CN116010743A (zh) 一种页面处理方法、装置、电子设备及存储介质
CN112100553B (zh) 一种网页页面配置方法、装置、电子设备及存储介质
RU2821840C2 (ru) Способ и устройство для загрузки изображения
CN113961298A (zh) 一种页面切换方法、装置、设备及介质
CN103218383A (zh) 在网络浏览器显示器上以小于原始图像的分辨率渲染图像
CN112835671A (zh) 应用页面场景切换方法、装置及设备
CN113779451A (zh) 一种页面加载方法和装置
EP2482206A1 (en) Method and apparatus for web browsing of handheld device
CN110865810A (zh) 资源复用的方法、装置、电子设备及计算机可读存储介质
CN110276032A (zh) 待展示信息数据获取方法、装置、系统及计算机存储介质
EP2830290A1 (en) Communication of Pages via a Digital Cellular Telecommunication Network
CN117389668A (zh) 图标加载方法及设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant