CN113867860A - 数据渲染方法、系统、存储介质及电子设备 - Google Patents

数据渲染方法、系统、存储介质及电子设备 Download PDF

Info

Publication number
CN113867860A
CN113867860A CN202111107976.5A CN202111107976A CN113867860A CN 113867860 A CN113867860 A CN 113867860A CN 202111107976 A CN202111107976 A CN 202111107976A CN 113867860 A CN113867860 A CN 113867860A
Authority
CN
China
Prior art keywords
data
page
rendering
initialization
loading
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.)
Pending
Application number
CN202111107976.5A
Other languages
English (en)
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 Minglue Zhaohui Technology Co Ltd
Original Assignee
Beijing Minglue Zhaohui Technology 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 Minglue Zhaohui Technology Co Ltd filed Critical Beijing Minglue Zhaohui Technology Co Ltd
Priority to CN202111107976.5A priority Critical patent/CN113867860A/zh
Publication of CN113867860A publication Critical patent/CN113867860A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements 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/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/31—Programming languages or programming paradigms
    • G06F8/315—Object-oriented languages
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements 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/44—Arrangements for executing specific programs
    • G06F9/448—Execution paradigms, e.g. implementations of programming paradigms
    • G06F9/4488—Object-oriented
    • G06F9/449—Object-oriented method invocation or resolution

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Computing Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请公开了一种数据渲染方法、系统、存储介质及电子设备，数据渲染方法包括：加载步骤：通过数据调用接口加载初始化数据；判断步骤：判断所述初始化数据是否存在历史位置，得到判断结果；渲染步骤：根据所述判断结果对所述初始化数据进行处理，将所述初始化数据渲染到页面中；加载新数据步骤：对所述页面中的显示区域与新数据区域设置边界，当监测到页面高度变化达到预设阈值时，通过所述数据调用接口加载新数据；渲染新数据步骤：将所述新数据与所述初始化数据进行拼接渲染到所述页面中。本发明能够摆脱页面自上而下渲染的机制，在页面初始化时根据具体项目需求定位到需要展示的位置，提高了数据展示的灵活性。

Description

数据渲染方法、系统、存储介质及电子设备
技术领域
本发明属于数据渲染领域，具体涉及一种数据渲染方法、系统、存储介质及电子设备。
背景技术
当下时代，无时无刻不产生着大量的数据，然而数据只有被合理的处理和展示，才能成为信息。这就需要开发人员能够尽可能多的提供数据展示的方式，并将其运用在适合的场景。
页面中很多数据展示的场景会应用到滚动加载(即滚动数据到某一位置时发起获取新数据的请求)。现有技术的滚动加载多是按照页面渲染的先后顺序进行数据展示；这样数据展示起始的位置局限于数据展示区域的起始位置，无法实现从需求最优位置开始浏览数据。但项目中存在一些需求，希望能够从某些特定位置开始浏览数据
目前Web页的列表型数据展示最常见的是分页列表，点击跳转到具体某一页，或向下滚动加载。
现有技术：
1、数据展示只能按照固定的顺序在起始位置开始展示数据，如果浏览数据途中退出页面，则只能重新翻页寻找上次浏览到的位置。
2、用户体验很差，再次寻找未浏览数据的过程会给服务器增加不必要的负担。
发明内容
本申请实施例提供了一种数据渲染方法、系统、存储介质及电子设备，以至少解决现有的数据渲染方法用户体验差的问题。
本发明提供了一种数据渲染方法，其中，包括：
加载步骤：通过数据调用接口加载初始化数据；
判断步骤：判断所述初始化数据是否存在历史位置，得到判断结果；
渲染步骤：根据所述判断结果对所述初始化数据进行处理，将所述初始化数据渲染到页面中。
上述数据渲染方法，其中，还包括：
加载新数据步骤：对所述页面中的显示区域与新数据区域设置边界，当监测到页面高度变化达到预设阈值时，通过所述数据调用接口加载新数据；
渲染新数据步骤：将所述新数据与所述初始化数据进行拼接渲染到所述页面中。
上述数据渲染方法，其中，所述渲染步骤包括：
计算步骤：若所述判断结果为存在所述历史位置，则按页面数据容量加载历史位置处的数据，并根据数据高度及所述页面高度计算滚动条位置进而在所述页面中对所述初始化数据进行渲染；
按需求渲染步骤：若所述判断结果为不存在所述历史位置，则根据所述页面数据容量请求默认位置数据，根据所述默认位置数据按需求在所述页面中渲染所述初始化数据。
上述数据渲染方法，其中，所述计算步骤包括：
利用JavaScript操作Dom设置滚动条的scrollTop与scrollheight控制所述初始化数据在所述页面中的起始位置，为后续滚动所述页面提供初始条件。
本发明还提供了一种数据渲染系统，其中，包括：
加载模块，所述加载模块通过数据调用接口加载初始化数据；
判断模块，所述判断模块判断所述初始化数据是否存在历史位置，得到判断结果；
渲染模块，所述渲染模块根据所述判断结果对所述初始化数据进行处理，将所述初始化数据渲染到页面中。
上述数据渲染系统，其中，还包括：
加载新数据模块，所述加载新数据模块对所述页面中的显示区域与新数据区域设置边界，当监测到页面高度变化达到预设阈值时，通过所述数据调用接口加载新数据；
渲染新数据模块，所述渲染新数据模块将所述新数据与所述初始化数据进行拼接渲染到所述页面中。
上述数据渲染系统，其中，所述渲染模块包括：
计算单元，若所述判断结果为存在所述历史位置，则按页面数据容量加载历史位置处的数据，所述计算单元根据数据高度及所述页面高度计算滚动条位置进而在所述页面中对所述初始化数据进行渲染；
按需求渲染单元，若所述判断结果为不存在所述历史位置，则根据所述页面数据容量请求默认位置数据，所述按需求渲染单元根据所述默认位置数据按需求在所述页面中渲染所述初始化数据。
上述数据渲染系统，其中，所述计算单元包括：
利用JavaScript操作Dom设置滚动条的scrollTop与scrollheight控制所述初始化数据在所述页面中的起始位置，为后续滚动所述页面提供初始条件。
一种电子设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中，所述处理器执行所述计算机程序时实现如上述任一所述的数据渲染方法。
一种存储介质，其上存储有计算机程序，其中，该程序被处理器执行时实现如上述任一所述的数据渲染方法。
本发明的有益效果在于：
本发明属于数据能力中的数据可视化领域。本发明能够摆脱页面自上而下渲染的机制，在页面初始化时根据具体项目需求定位到需要展示的位置；
本发明能够提高数据展示的灵活性，利用定位机制结合数据滚动加载技术能够实现多元化的页面数据展示效果，如可以模拟移动端的数据交互方式实现向下滚动加载数据；
本发明结合不同应用场景，定位数据显示在任意其实位置，如可以记录数据浏览的位置，下次打开页面时将数据定位到上次浏览的位置。
附图说明
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。
在附图中：
图1是本发明的数据渲染方法的流程图；
图2是本发明的渲染步骤S3的流程图；
图3是本发明的方案流程图；
图4是本发明的实现效果图；
图5是本发明的数据渲染系统的结构示意图；
图6是根据本发明实施例的电子设备的框架图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行描述和说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。基于本申请提供的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。
显而易见地，下面描述中的附图仅仅是本申请的一些示例或实施例，对于本领域的普通技术人员而言，在不付出创造性劳动的前提下，还可以根据这些附图将本申请应用于其他类似情景。此外，还可以理解的是，虽然这种开发过程中所作出的努力可能是复杂并且冗长的，然而对于与本申请公开的内容相关的本领域的普通技术人员而言，在本申请揭露的技术内容的基础上进行的一些设计，制造或者生产等变更只是常规的技术手段，不应当理解为本申请公开的内容不充分。
在本申请中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域普通技术人员显式地和隐式地理解的是，本申请所描述的实施例在不冲突的情况下，可以与其它实施例相结合。
除非另作定义，本申请所涉及的技术术语或者科学术语应当为本申请所属技术领域内具有一般技能的人士所理解的通常意义。本申请所涉及的“一”、“一个”、“一种”、“该”等类似词语并不表示数量限制，可表示单数或复数。本申请所涉及的术语“包括”、“包含”、“具有”以及它们任何变形，意图在于覆盖不排他的包含；例如包含了一系列步骤或模块(单元)的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可以还包括没有列出的步骤或单元，或可以还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。本申请所涉及的“连接”、“相连”、“耦接”等类似的词语并非限定于物理的或者机械的连接，而是可以包括电气的连接，不管是直接的还是间接的。本申请所涉及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。本申请所涉及的术语“第一”、“第二”、“第三”等仅仅是区别类似的对象，不代表针对对象的特定排序。
下面结合附图所示的各实施方式对本发明进行详细说明，但应当说明的是，这些实施方式并非对本发明的限制，本领域普通技术人员根据这些实施方式所作的功能、方法、或者结构上的等效变换或替代，均属于本发明的保护范围之内。
在详细阐述本发明各个实施例之前，对本发明的核心发明思想予以概述，并通过下述若干实施例予以详细阐述。
实施例一：
请参照图1，图1是数据渲染方法的流程图。如图1所示，本发明的数据渲染方法包括：
加载步骤S1：通过数据调用接口加载初始化数据；
判断步骤S2：判断所述初始化数据是否存在历史位置，得到判断结果；
渲染步骤S3：根据所述判断结果对所述初始化数据进行处理，将所述初始化数据渲染到页面中；
加载新数据步骤S4：对所述页面中的显示区域与新数据区域设置边界，当监测到页面高度变化达到预设阈值时，通过所述数据调用接口加载新数据；
渲染新数据步骤S5：将所述新数据与所述初始化数据进行拼接渲染到所述页面中。
请参照图2，图2是渲染步骤S3的流程图。如图2所示，所述渲染步骤S3包括：
计算步骤S31：若所述判断结果为存在所述历史位置，则按页面数据容量加载历史位置处的数据，并根据数据高度及所述页面高度计算滚动条位置进而在所述页面中对所述初始化数据进行渲染；
按需求渲染步骤S32：若所述判断结果为不存在所述历史位置，则根据所述页面数据容量请求默认位置数据，根据所述默认位置数据按需求在所述页面中渲染所述初始化数据。
其中，所述计算步骤包括：
利用JavaScript操作Dom设置滚动条的scrollTop与scrollheight控制所述初始化数据在所述页面中的起始位置，为后续滚动所述页面提供初始条件。
具体地说，本发明是对传统的数据按序展示方式做新的尝试，通过定位手段为数据展示赋能，实现按需求展示最优数据。
进一步，利用js操作Dom设置滚动条的scrollTop与scrollheight控制展示数据在页面中的起始位置，为后续滚动页面操作提供初始条件。
其中，为显示区域与新数据区域设置边界(即为加载条件设置阈值)，当监测到页面高度变化符合域值条件时，触发数据调用接口加载新数据.具体条件根据需求通过所有卡片高度contentHeight、被遮挡高度scrollTop与可见视口高度height确定。获取到最新数据后将其与原数据进行拼接以正确位置渲染到页面上。
再进一步，根据图3及图4所示本发明具体如下：
在页面初始化时调取接口加载数据；数据中获取history字段(history存储历史数据位置)内容，检查是否存在历史位置；存在历史位置则按页面数据容量(约定一次请求的数据条数)加载历史位置处的数据，同时根据数据高度、页面高度计算滚动条位置进行页面渲染；若不存在历史位置，则根据页面容量请求默认位置数据，并按需求(页面顶部或底部)渲染数据。
实施例二：
请参照图5，图5是本发明的数据渲染系统的结构示意图。如图5所示本发明的一种数据渲染系统，其中，包括：
加载模块11，所述加载模块11通过数据调用接口加载初始化数据；
判断模块12，所述判断模块12判断所述初始化数据是否存在历史位置，得到判断结果；
渲染模块13，所述渲染模块13根据所述判断结果对所述初始化数据进行处理，将所述初始化数据渲染到页面中。
上述数据渲染系统，其中，还包括：
加载新数据模块14，所述加载新数据模块14对所述页面中的显示区域与新数据区域设置边界，当监测到页面高度变化达到预设阈值时，通过所述数据调用接口加载新数据；
渲染新数据模块15，所述渲染新数据模块15将所述新数据与所述初始化数据进行拼接渲染到所述页面中。
上述数据渲染系统，其中，所述渲染模块13包括：
计算单元131，若所述判断结果为存在所述历史位置，则按页面数据容量加载历史位置处的数据，所述计算单元131根据数据高度及所述页面高度计算滚动条位置进而在所述页面中对所述初始化数据进行渲染；
按需求渲染单元132，若所述判断结果为不存在所述历史位置，则根据所述页面数据容量请求默认位置数据，所述按需求渲染单元132根据所述默认位置数据按需求在所述页面中渲染所述初始化数据。
上述数据渲染系统，其中，所述计算单元131包括：
利用JavaScript操作Dom设置滚动条的scrollTop与scrollheight控制所述初始化数据在所述页面中的起始位置，为后续滚动所述页面提供初始条件。
实施例三：
结合图6所示，本实施例揭示了一种电子设备的一种具体实施方式。电子设备可以包括处理器81以及存储有计算机程序指令的存储器82。
具体地，上述处理器81可以包括中央处理器(CPU)，或者特定集成电路(Application Specific Integrated Circuit，简称为ASIC)，或者可以被配置成实施本申请实施例的一个或多个集成电路。
其中，存储器82可以包括用于数据或指令的大容量存储器。举例来说而非限制，存储器82可包括硬盘驱动器(Hard Disk Drive，简称为HDD)、软盘驱动器、固态驱动器(SolidState Drive，简称为SSD)、闪存、光盘、磁光盘、磁带或通用串行总线(Universal SerialBus，简称为USB)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器82可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器82可在数据处理装置的内部或外部。在特定实施例中，存储器82是非易失性(Non-Volatile)存储器。在特定实施例中，存储器82包括只读存储器(Read-Only Memory，简称为ROM)和随机存取存储器(RandomAccess Memory，简称为RAM)。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM(Programmable Read-Only Memory，简称为PROM)、可擦除PROM(Erasable ProgrammableRead-Only Memory，简称为EPROM)、电可擦除PROM(Electrically Erasable ProgrammableRead-Only Memory，简称为EEPROM)、电可改写ROM(Electrically Alterable Read-OnlyMemory，简称为EAROM)或闪存(FLASH)或者两个或更多个以上这些的组合。在合适的情况下，该RAM可以是静态随机存取存储器(Static Random-Access Memory，简称为SRAM)或动态随机存取存储器(Dynamic Random Access Memory，简称为DRAM)，其中，DRAM可以是快速页模式动态随机存取存储器(Fast Page Mode Dynamic Random Access Memory，简称为FPMDRAM)、扩展数据输出动态随机存取存储器(Extended Date Out Dynamic RandomAccess Memory，简称为EDODRAM)、同步动态随机存取内存(Synchronous Dynamic Random-Access Memory，简称SDRAM)等。
存储器82可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器81所执行的可能的计算机程序指令。
处理器81通过读取并执行存储器82中存储的计算机程序指令，以实现上述实施例中的任意一种数据渲染方法。
在其中一些实施例中，电子设备还可包括通信接口83和总线80。其中，如图6所示，处理器81、存储器82、通信接口83通过总线80连接并完成相互间的通信。
通信接口83用于实现本申请实施例中各模块、装置、单元和/或设备之间的通信。通信端口83还可以实现与其他部件例如：外接设备、图像/数据采集设备、数据库、外部存储以及图像/数据处理工作站等之间进行数据通信。
总线80包括硬件、软件或两者，将电子设备的部件彼此耦接在一起。总线80包括但不限于以下至少之一：数据总线(Data Bus)、地址总线(Address Bus)、控制总线(ControlBus)、扩展总线(Expansion Bus)、局部总线(Local Bus)。举例来说而非限制，总线80可包括图形加速接口(Accelerated Graphics Port，简称为AGP)或其他图形总线、增强工业标准架构(Extended Industry Standard Architecture，简称为EISA)总线、前端总线(FrontSide Bus，简称为FSB)、超传输(Hyper Transport，简称为HT)互连、工业标准架构(Industry Standard Architecture，简称为ISA)总线、无线带宽(InfiniBand)互连、低引脚数(Low Pin Count，简称为LPC)总线、存储器总线、微信道架构(Micro ChannelArchitecture，简称为MCA)总线、外围组件互连(Peripheral Component Interconnect，简称为PCI)总线、PCI-Express(PCI-X)总线、串行高级技术附件(Serial AdvancedTechnology Attachment，简称为SATA)总线、视频电子标准协会局部(Video ElectronicsStandards Association Local Bus，简称为VLB)总线或其他合适的总线或者两个或更多个以上这些的组合。在合适的情况下，总线80可包括一个或多个总线。尽管本申请实施例描述和示出了特定的总线，但本申请考虑任何合适的总线或互连。
该电子设备可以基于数据渲染，从而实现结合图1-图2描述的数据渲染方法。
另外，结合上述实施例中的数据渲染，本申请实施例可提供一种计算机可读存储介质来实现。该计算机可读存储介质上存储有计算机程序指令；该计算机程序指令被处理器执行时实现上述实施例中的任意一种数据渲染方法。
以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
综上所述，基于本发明的有益效果在于，本公开提供了一种数据渲染方法，本发明属于数据能力中的数据可视化领域。本发明能够摆脱页面自上而下渲染的机制，在页面初始化时根据具体项目需求定位到需要展示的位置；本发明能够提高数据展示的灵活性，利用定位机制结合数据滚动加载技术能够实现多元化的页面数据展示效果，如可以模拟移动端的数据交互方式实现向下滚动加载数据。
以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明保护范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本发明的保护范围应以所附权利要求的保护范围为准。

Claims (10)

1.一种数据渲染方法，其特征在于，包括：
加载步骤：通过数据调用接口加载初始化数据；
判断步骤：判断所述初始化数据是否存在历史位置，得到判断结果；
渲染步骤：根据所述判断结果对所述初始化数据进行处理，将所述初始化数据渲染到页面中。
2.如权利要求1所述的数据渲染方法，其特征在于，还包括：
加载新数据步骤：对所述页面中的显示区域与新数据区域设置边界，当监测到页面高度变化达到预设阈值时，通过所述数据调用接口加载新数据；
渲染新数据步骤：将所述新数据与所述初始化数据进行拼接渲染到所述页面中。
3.如权利要求2所述的数据渲染方法，其特征在于，所述渲染步骤包括：
计算步骤：若所述判断结果为存在所述历史位置，则按页面数据容量加载历史位置处的数据，并根据数据高度及所述页面高度计算滚动条位置进而在所述页面中对所述初始化数据进行渲染；
按需求渲染步骤：若所述判断结果为不存在所述历史位置，则根据所述页面数据容量请求默认位置数据，根据所述默认位置数据按需求在所述页面中渲染所述初始化数据。
4.如权利要求3所述的数据渲染方法，其特征在于，所述计算步骤包括：
利用JavaScript操作Dom设置滚动条的scrollTop与scrollheight控制所述初始化数据在所述页面中的起始位置，为后续滚动所述页面提供初始条件。
5.一种数据渲染系统，其特征在于，包括：
加载模块，所述加载模块通过数据调用接口加载初始化数据；
判断模块，所述判断模块判断所述初始化数据是否存在历史位置，得到判断结果；
渲染模块，所述渲染模块根据所述判断结果对所述初始化数据进行处理，将所述初始化数据渲染到页面中。
6.如权利要求5所述的数据渲染系统，其特征在于，还包括：
加载新数据模块，所述加载新数据模块对所述页面中的显示区域与新数据区域设置边界，当监测到页面高度变化达到预设阈值时，通过所述数据调用接口加载新数据；
渲染新数据模块，所述渲染新数据模块将所述新数据与所述初始化数据进行拼接渲染到所述页面中。
7.如权利要求6所述的数据渲染系统，其特征在于，所述渲染模块包括：
计算单元，若所述判断结果为存在所述历史位置，则按页面数据容量加载历史位置处的数据，所述计算单元根据数据高度及所述页面高度计算滚动条位置进而在所述页面中对所述初始化数据进行渲染；
按需求渲染单元，若所述判断结果为不存在所述历史位置，则根据所述页面数据容量请求默认位置数据，所述按需求渲染单元根据所述默认位置数据按需求在所述页面中渲染所述初始化数据。
8.如权利要求7所述的数据渲染系统，其特征在于，所述计算单元包括：
利用JavaScript操作Dom设置滚动条的scrollTop与scrollheight控制所述初始化数据在所述页面中的起始位置，为后续滚动所述页面提供初始条件。
9.一种电子设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至4中任一项所述的数据渲染方法。
10.一种存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1至4中任一项所述的数据渲染方法。
CN202111107976.5A 2021-09-22 2021-09-22 数据渲染方法、系统、存储介质及电子设备 Pending CN113867860A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111107976.5A CN113867860A (zh) 2021-09-22 2021-09-22 数据渲染方法、系统、存储介质及电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111107976.5A CN113867860A (zh) 2021-09-22 2021-09-22 数据渲染方法、系统、存储介质及电子设备

Publications (1)

Publication Number Publication Date
CN113867860A true CN113867860A (zh) 2021-12-31

Family

ID=78993055

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111107976.5A Pending CN113867860A (zh) 2021-09-22 2021-09-22 数据渲染方法、系统、存储介质及电子设备

Country Status (1)

Country Link
CN (1) CN113867860A (zh)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106886570A (zh) * 2017-01-16 2017-06-23 网宿科技股份有限公司 页面处理方法及装置
CN110162353A (zh) * 2018-02-11 2019-08-23 腾讯科技（深圳）有限公司 多页面切换方法及设备、存储介质、终端
CN110362766A (zh) * 2018-04-02 2019-10-22 腾讯科技（深圳）有限公司 一种页面显示控制方法及终端
CN111428164A (zh) * 2020-03-27 2020-07-17 五八有限公司 页面显示方法、装置、移动终端、电子设备及存储介质

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106886570A (zh) * 2017-01-16 2017-06-23 网宿科技股份有限公司 页面处理方法及装置
CN110162353A (zh) * 2018-02-11 2019-08-23 腾讯科技（深圳）有限公司 多页面切换方法及设备、存储介质、终端
CN110362766A (zh) * 2018-04-02 2019-10-22 腾讯科技（深圳）有限公司 一种页面显示控制方法及终端
CN111428164A (zh) * 2020-03-27 2020-07-17 五八有限公司 页面显示方法、装置、移动终端、电子设备及存储介质

Similar Documents

Publication Publication Date Title
CN106294658B (zh) 网页快速展示方法和装置
EP2755145A1 (en) Webpage browsing method and device, and storage medium
CN110020300B (zh) 一种浏览器页面合成方法及终端
WO2017219524A1 (zh) 一种页面保存的方法及电子设备
WO2017202175A1 (zh) 一种视频压缩方法、装置及电子设备
CN110609718A (zh) 图片加载方法、装置、电子设备及可读存储介质
CN108062336B (zh) 媒体信息处理方法及装置
CN108733716A (zh) 图片预加载方法、装置、电子设备及可读存储介质
CN114071047A (zh) 帧率控制方法及相关装置
US9754391B2 (en) Webpage display method and apparatus
CN106940722B (zh) 一种图片显示方法及装置
CN115357834A (zh) 页面跳转方法、装置、设备以及存储介质
CN111400633A (zh) 页面资源加载的方法及装置
CN113867860A (zh) 数据渲染方法、系统、存储介质及电子设备
US20210185109A1 (en) Page presentation method and system, computer system, and computer readable medium
CN113010824A (zh) 实现网页长列表无限滚动的方法及系统
CN110297997B (zh) 页面显示方法、装置及设备
CN111143293B (zh) 一种元数据获取方法、装置、设备及计算机可读存储介质
CN114661370A (zh) 资源加载方法、装置、电子设备及计算机存储介质
EP2530640A1 (en) Image copying method and device
WO2016183795A1 (en) Method, apparatus for loading a resource in a web page on a device
US9536013B2 (en) Method and apparatus for web browsing of handheld device
CN109993274B (zh) 人工智能计算装置及相关产品
CN112915534B (zh) 游戏的图像计算方法及装置
CN112434235B (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