CN111459480A - 一种实现tv大屏无限瀑布流的方法 - Google Patents
一种实现tv大屏无限瀑布流的方法 Download PDFInfo
- Publication number
- CN111459480A CN111459480A CN202010200316.0A CN202010200316A CN111459480A CN 111459480 A CN111459480 A CN 111459480A CN 202010200316 A CN202010200316 A CN 202010200316A CN 111459480 A CN111459480 A CN 111459480A
- Authority
- CN
- China
- Prior art keywords
- large screen
- waterfall flow
- poster
- loading
- infinite
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 21
- 230000000694 effects Effects 0.000 claims abstract description 16
- 238000009877 rendering Methods 0.000 claims abstract description 10
- 238000004064 recycling Methods 0.000 claims description 3
- 230000000007 visual effect Effects 0.000 abstract description 4
- 230000005540 biological transmission Effects 0.000 abstract description 3
- 238000010276 construction Methods 0.000 description 3
- 239000000463 material Substances 0.000 description 2
- 208000003464 asthenopia Diseases 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000011159 matrix material Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
Images
Classifications
-
- 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
- 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
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明涉及显示技术领域，具体涉及一种实现TV大屏无限瀑布流的方法，包括创建基于瀑布流的基础框架、缓存所需要展示的海报图片，并按所需展示顺序进行排列、对基础框架进行渲染、完成基础框架加载、将首先需要展示的海报图片加载至基础框架中，而后显示在TV大屏上、对基础框架进行重复渲染、继续填充剩余海报图片，加载至重复渲染的基础框架上，而后显示在TV大屏上、重复步骤六和步骤七，直至海报图片填充完毕，实现在TV大屏上完成瀑布流效果八个步骤；本发明将基础框架与海报图片加载进行分离，仅需加载一次基础框架，大大的减少了由于数据传输造成的可视大屏呈现延迟时间，异步加载的方式避免用户由于等待页面呈现而产生的时间感。
Description
技术领域
本发明涉及显示技术领域，具体涉及一种实现TV大屏无限瀑布流的方法。
背景技术
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式，巧妙的利用视觉层级，视线的任意流动又缓解了视觉疲劳，同时给人以不拘一格的感觉。
目前现有的TV大屏，大部分仅实现了单一屏推荐页面，用户操作均需切换页面。对于已经存在瀑布流的大屏产品，APK模式的为固定好瀑布流布局后进行填充，实际上为有限瀑布流；B/S模式的加载不同瀑布流页面，页面与页面之间加载需要及长的加载时间，用户体验非常差。
基于此，本发明设计了一种实现TV大屏无限瀑布流的方法，以解决上述问题。
发明内容
本发明的目的在于解决上述背景技术中提出的问题，提供了一种实现TV大屏无限瀑布流的方法。
为实现上述目的，本发明提供如下技术方案：一种实现TV大屏无限瀑布流的方法，包括以下步骤：
步骤一：创建基于瀑布流的基础框架；
步骤二：缓存所需要展示的海报图片，并按所需展示顺序进行排列；
步骤三：对基础框架进行渲染；
步骤四：完成基础框架加载；
步骤五：将首先需要展示的海报图片加载至基础框架中，而后显示在TV大屏上；
步骤六：对基础框架进行重复渲染；
步骤七：继续填充剩余海报图片，加载至重复渲染的基础框架上，而后显示在TV大屏上；
步骤八：重复步骤六和步骤七，直至海报图片填充完毕，实现在TV大屏上完成瀑布流效果。
进一步地，所述基础框架为B/S架构的基础框架，所述B/S基础框架架构包括浏览器端、服务器端和中间件，所述浏览器端、服务器端和中间件相互信号连接。
进一步地，所述基础框架占用的数据容量为1-10k。
进一步地，所述基础框架构建的数量为1-5个，优选的数量为2-3个。
进一步地，所述步骤八中，当TV大屏填充满后海报图片继续填充加载时，最开始填充加载的图片会移出屏幕进行回收，以用于下次填充加载。
进一步地，所述瀑布流效果包括横向无限瀑布流效果和竖直无限瀑布流效果。
与现有技术相比，本发明的有益效果是：本发明通过构建的TV大屏无限瀑布流框架，能够实现TV大屏用户横向或竖直无限瀑布流效果，将基础框架与海报图片加载进行分离，并且仅需加载一次基础框架，大大的减少了由于数据传输造成的可视大屏呈现延迟时间。并且通过框架构建完成，异步加载海报图片的方式避免用户由于等待页面呈现而产生的时间感。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明方法的流程图；
图2为本发明海报图片加载填充时示意图；
图3为本发明海报图片加载填充后效果图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
请参阅图1-3，本实施例提供一种技术方案：
一种实现TV大屏无限瀑布流的方法，包括以下步骤：
步骤一：创建基于瀑布流的基础框架；
步骤二：缓存所需要展示的海报图片，并按所需展示顺序进行排列；
步骤三：对基础框架进行渲染；
步骤四：完成基础框架加载；
步骤五：将首先需要展示的海报图片加载至基础框架中，而后显示在TV大屏上；
步骤六：对基础框架进行重复渲染；
步骤七：继续填充剩余海报图片，加载至重复渲染的基础框架上，而后显示在TV大屏上；
步骤八：重复步骤六和步骤七，直至海报图片填充完毕，实现在TV大屏上完成瀑布流效果。
其中，基础框架为B/S架构的基础框架，B/S基础框架架构包括浏览器端、服务器端和中间件，浏览器端、服务器端和中间件相互信号连接。基础框架占用的数据容量为1-10k，几K的大小基础框架加载可在用户无感知情况下完成基础框架渲染。基础框架构建的数量为1-5个，优选为2-3个，基础框架在无线瀑布流加载时，仅2-3个基础框架，前端页面重复渲染即可。步骤八中，当TV大屏填充满后海报图片继续填充加载时，最开始填充加载的图片会移出屏幕进行回收，以用于下次填充加载。瀑布流效果包括横向无限瀑布流效果和竖直无限瀑布流效果。
本发明使用时，创建基础框架，在大屏TV展示时，仅加载基础框架，几K的大小基础框架加载可在用户无感知情况下完成基础框架渲染。并且基础框架在无线瀑布流加载时，仅2-3个基础框架，前端页面重复渲染即可。通过基础框架加载完成后，异步填充海报图片，实现完成瀑布流效果。本发明通过一个基础框架无限次加载多个不同影视类海报，将框架布局与海报图片加载进行分离，仅需加载一次基础框架，大大的减少了由于数据传输造成的可视大屏呈现延迟时间。并且通过框架构建完成，异步加载海报图片的方式避免用户由于等待页面呈现而产生的时间感。
在本说明书的描述中，参考术语“一个实施例”、“示例”、“具体示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
以上公开的本发明优选实施例只是用于帮助阐述本发明。优选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本说明书的内容，可作很多的修改和变化。本说明书选取并具体描述这些实施例，是为了更好地解释本发明的原理和实际应用，从而使所属技术领域技术人员能很好地理解和利用本发明。本发明仅受权利要求书及其全部范围和等效物的限制。
Claims (6)
1.一种实现TV大屏无限瀑布流的方法，其特征在于：包括以下步骤：
步骤一：创建基于瀑布流的基础框架；
步骤二：缓存所需要展示的海报图片，并按所需展示顺序进行排列；
步骤三：对基础框架进行渲染；
步骤四：完成基础框架加载；
步骤五：将首先需要展示的海报图片加载至基础框架中，而后显示在TV大屏上；
步骤六：对基础框架进行重复渲染；
步骤七：继续填充剩余海报图片，加载至重复渲染的基础框架上，而后显示在TV大屏上；
步骤八：重复步骤六和步骤七，直至海报图片填充完毕，实现在TV大屏上完成瀑布流效果。
2.根据权利要求1所述的一种实现TV大屏无限瀑布流的方法，其特征在于：所述基础框架为B/S架构的基础框架，所述B/S基础框架架构包括浏览器端、服务器端和中间件，所述浏览器端、服务器端和中间件相互信号连接。
3.根据权利要求1所述的一种实现TV大屏无限瀑布流的方法，其特征在于：所述基础框架占用的数据容量为1-10k。
4.根据权利要求1所述的一种实现TV大屏无限瀑布流的方法，其特征在于：所述基础框架构建的数量为1-5个。
5.根据权利要求1所述的一种实现TV大屏无限瀑布流的方法，其特征在于：所述步骤八中，当TV大屏填充满后海报图片继续填充加载时，最开始填充加载的图片会移出屏幕进行回收，以用于下次填充加载。
6.根据权利要求1所述的一种实现TV大屏无限瀑布流的方法，其特征在于：所述瀑布流效果包括横向无限瀑布流效果和竖直无限瀑布流效果。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010200316.0A CN111459480A (zh) | 2020-03-20 | 2020-03-20 | 一种实现tv大屏无限瀑布流的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010200316.0A CN111459480A (zh) | 2020-03-20 | 2020-03-20 | 一种实现tv大屏无限瀑布流的方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111459480A true CN111459480A (zh) | 2020-07-28 |
Family
ID=71682923
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010200316.0A Pending CN111459480A (zh) | 2020-03-20 | 2020-03-20 | 一种实现tv大屏无限瀑布流的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111459480A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113179431A (zh) * | 2021-04-19 | 2021-07-27 | 广州欢网科技有限责任公司 | Tv视频应用智能无限瀑布流方法、装置和设备 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2016082698A1 (zh) * | 2014-11-27 | 2016-06-02 | 阿里巴巴集团控股有限公司 | 一种页面信息的操作方法、装置及电子设备 |
| CN108228816A (zh) * | 2017-12-29 | 2018-06-29 | 北京奇虎科技有限公司 | 一种瀑布流图片的加载方法和装置 |
| CN110727893A (zh) * | 2019-10-11 | 2020-01-24 | 北京齐尔布莱特科技有限公司 | 一种瀑布流图片的加载方法、装置和移动终端 |
-
2020
- 2020-03-20 CN CN202010200316.0A patent/CN111459480A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2016082698A1 (zh) * | 2014-11-27 | 2016-06-02 | 阿里巴巴集团控股有限公司 | 一种页面信息的操作方法、装置及电子设备 |
| CN108228816A (zh) * | 2017-12-29 | 2018-06-29 | 北京奇虎科技有限公司 | 一种瀑布流图片的加载方法和装置 |
| CN110727893A (zh) * | 2019-10-11 | 2020-01-24 | 北京齐尔布莱特科技有限公司 | 一种瀑布流图片的加载方法、装置和移动终端 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113179431A (zh) * | 2021-04-19 | 2021-07-27 | 广州欢网科技有限责任公司 | Tv视频应用智能无限瀑布流方法、装置和设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP1914640B1 (en) | Multiple screen size render-engine | |
| US20140181674A1 (en) | Multimedia presentation editor for a small-display communication terminal or computing device | |
| US6724948B1 (en) | Scaling images for display | |
| CN101796831B (zh) | 基于显示装置的屏幕大小缩放视频的自适应视频处理设备及方法 | |
| WO2015180433A1 (zh) | 自适应调整的界面流式布局显示的方法和系统 | |
| CN105739934A (zh) | 多屏拼接显示处理方法和设备 | |
| CN101087433A (zh) | 一种多画面组合电视墙显示画面的方法 | |
| CN102073650A (zh) | 一种网页自适应调节的方法和设备 | |
| CN101889444A (zh) | 显示控制装置、显示控制方法、显示控制程序以及存储介质 | |
| CN105224564A (zh) | 一种网页适应屏幕排版方法及装置 | |
| CN106385635A (zh) | Gif动画实时控制方法及播放器 | |
| WO2018113218A1 (zh) | 一种拼接墙显示方法、装置及系统 | |
| US7164448B2 (en) | Method for scrolling MPEG-compressed pictures | |
| CN111459480A (zh) | 一种实现tv大屏无限瀑布流的方法 | |
| CN112583821A (zh) | 显示方法、显示系统、电子设备和计算机可读存储介质 | |
| JPH10505735A (ja) | 図式映像の伝送 | |
| CN212137804U (zh) | 一种点对点视频拼接系统 | |
| CN100364323C (zh) | 采用嵌入式Linux系统的电视机显示高分辨率JPEG图片的方法 | |
| CN106874387A (zh) | 一种自适应html滚屏展示实时信息的方法 | |
| CN1383325A (zh) | 电视墙的组成方法 | |
| CN111324575A (zh) | 一种om运营活动管理系统 | |
| CN101159819A (zh) | 一种在线视频中插播Flash的方法和装置 | |
| CN113302913A (zh) | 图像处理的方法、装置和系统 | |
| Taylor | The cartographic potential of Telidon | |
| JP5520890B2 (ja) | 画像処理装置、画像データ生成装置、画像処理方法、画像データ生成方法、および画像ファイルのデータ構造 |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20200728 |