一种基于可视区域的图片加载方法及装置的制造方法
【专利摘要】本发明涉及一种图片加载方法及装置，属于视频信息处理领域，具体是涉及一种基于可视区的图片加载方法及装置。包括：步骤1，接收用户对图片加载的触发事件；步骤2，判断当前屏幕中的可视区域，获取可视区域中的图片容器；其中，所述图片容器是可视区中用于显示图片的区域；步骤3，加载位于容器中的图片。总体而言，本发明所构思的以上技术方案与现有技术相比，本发明提供了通过可视区域的方式加载图片资源，节省网站网络带宽，同时提升了网站在初始化的渲染速度，提升了用户体验。
【专利说明】一种基于可视区域的图片加载方法及装置
[0001]
技术领域
[0002]本发明涉及一种图片加载方法及装置，属于视频信息处理领域，具体是涉及一种基于可视区域的图片加载方法及装置。
[0003]
【背景技术】
[0004]在前端开发领域，网站的图片加载会严重影响页面初始化渲染速度，大多数网站对于此问题的处理方式为:初始化统一加载相同的默认图片，待DOM加载完毕后再加载图片的真实地址。
[0005]虽然这种方式可以提升页面的初始化渲染速度，但是浪费网站网络带宽，因为很多图片在用户看不见的情况下，可以不执行二次加载。
[0006]
【发明内容】
[0007]针对现有技术的以上缺陷或改进需求，本发明提供了一种基于可视区域的图片加载方法及装置，其目的在于，解决因为无用图片的加载导致网站网络带宽高的问题。
[0008]为了解决上述问题，根据本发明的一个方面，提供了一种基于可视区域的图片加载方法，包括:
步骤I，接收用户对图片加载的触发事件；
步骤2，判断当前屏幕中的可视区域，获取可视区域中的图片容器;其中，所述图片容器是可视区域中用于显示图片的区域；
步骤3，加载位于图片容器中的图片。
[0009]优选的，上述的一种基于可视区域的图片加载方法，所述步骤I中，图片加载的触发事件包括:鼠标的滚动、点击，拖拽事件中的一种或多种。
[0010]优选的，上述的一种基于可视区域的图片加载方法，所述步骤2中，图片容器的区域等于可视区域或者为可视区域的部分区域。
[0011]优选的，上述的一种基于可视区域的图片加载方法，所述步骤2中，利用若干个位于可视区域内的面积可设的矩形来获取图片容器。
[0012]优选的，上述的一种基于可视区域的图片加载方法，所述步骤3中，将位于图片容器中的图片的默认地址替换为真实的图片地址，加载替换后的图片。
[0013]为了解决上述问题，根据本发明的另一个方面，提供了一种基于可视区域的图片加载装置，包括:
事件监控模块，接收用户对图片加载的触发事件；
图片容器获取模块，判断当前屏幕中的可视区域，获取可视区域中的图片容器;其中，所述图片容器是可视区域中用于显示图片的区域； 加载更新模块，加载位于图片容器中的图片。
[0014]优选的，上述的一种基于可视区域的图片加载装置，事件监控模块中，图片加载的触发事件包括:鼠标的滚动、点击，拖拽事件中的一种或多种。
[0015]优选的，上述的一种基于可视区域的图片加载装置，所述图片容器获取模块中，图片容器的区域等于可视区域或者为可视区域的部分区域。
[0016]优选的，上述的一种基于可视区域的图片加载装置，所述图片容器获取模块中，利用若干个位于可视区域内的面积可设的矩形来获取图片容器。
[0017]优选的，上述的一种基于可视区域的图片加载装置，所述加载更新模块中，将位于图片容器中的图片的默认地址替换为真实的图片地址，加载替换后的图片。
[0018]总体而言，本发明所构思的以上技术方案与现有技术相比，本发明提供了通过可视区域的方式加载图片资源，节省网站网络带宽，同时提升了网站在初始化的渲染速度，提升了用户体验。
[0019]
【附图说明】
[0020]附图1是本发明的流程示意图。
[0021]附图2是本发明的一种可视区域示意图。
[0022]附图3是本发明的另一种可视区域示意图。
[0023]附图4是本发明的可视区域判定示意图。
[0024]附图5是本发明的一种应用不意图。
[0025]附图6是本发明的结构示意图。
[0026]
【具体实施方式】
[0027]下面通过实施例，并结合附图，对本发明的技术方案作进一步具体的说明。
[0028]—种基于可视区域的图片加载方法，包括:
步骤I，接收用户对图片加载的触发事件；
步骤2，判断当前屏幕中的可视区域，获取可视区域中的图片容器;其中，所述图片容器是可视区域中用于显示图片的区域；
步骤3，加载位于图片容器中的图片。
[0029]其中，所述步骤I中，图片加载的触发事件包括:鼠标的滚动、点击，拖拽事件中的一种或多种。
[0030]其中，所述步骤2中，图片容器的区域等于可视区域或者为可视区域的部分区域。可以利用若干个位于可视区域内的面积可设的矩形来获取图片容器。
[0031]其中，所述步骤3中，将位于图片容器中的图片的默认地址替换为真实的图片地址，加载替换后的图片。
[0032]—种基于可视区域的图片加载装置，包括:
事件监控模块，接收用户对图片加载的触发事件；
图片容器获取模块，判断当前屏幕中的可视区域，获取可视区域中的图片容器;其中，所述图片容器是可视区域中用于显示图片的区域；
加载更新模块，加载位于图片容器中的图片。
[0033]其中，事件监控模块中，图片加载的触发事件包括:鼠标的滚动、点击，拖拽事件中的一种或多种。
[0034]其中，所述图片容器获取模块中，图片容器的区域等于可视区域或者为可视区域的部分区域。可以利用若干个位于可视区域内的面积可设的矩形来获取图片容器。
[0035]其中，所述加载更新模块中，将位于图片容器中的图片的默认地址替换为真实的图片地址，加载替换后的图片。
[0036]
实施例1
本实施例提供了一种基于可视区域的图片加载方法及装置。其操作步骤如图1所示。其中:
图片容器代表需要被监控的“可视区域”，可以是网站的整个页面，如图2所示，也可以是局部1?块，如图3所不。
[0037]区域判定包含四个模块:上左、上右、下左、下右，当图片的位置在当前视觉的方位内部，就代表图片需要执行加载真实图片地址的逻辑，如图4所示。
[0038]区域的范围被多个矩形点锁定，默认我们用四个矩形顶点放在可视区域的四个极限位置进行锁定，矩形的默认的大小为:50pX*50pX。可以通过控制矩形的大小、位置、数量，监控更加复杂的场景，比如:圆形、不规则形等等。
[0039]当图片在规定的范围内，便会被收集，待收集完后统一替换图片的地址为各自的真实地址。
[0040]事件类型代表用户触发加载逻辑的操作行为，比如:
1.用户通过鼠标滚动页面查看图片
2.用户通过翻页切换图片列表
3.用户通过点击查看图片列表
事件类型由调用方根据具体场景动态选择，默认不选择事件类型。
[0041]图5是本发明的一种应用示意图。在斗鱼直播直播页面，用户通过滚动页面查看视频列表。图片在进入可视区域后再执行加载。
[0042]
实施例2
一种基于可视区域的图片加载装置，包括:
事件监控模块，接收用户对图片加载的触发事件；
图片容器获取模块，判断当前屏幕中的可视区域，获取可视区域中的图片容器;其中，所述图片容器是可视区域中用于显示图片的区域；
加载更新模块，加载位于图片容器中的图片。
[0043]其中，事件监控模块中，图片加载的触发事件包括:鼠标的滚动、点击，拖拽事件中的一种或多种。
[0044]其中，所述图片容器获取模块中，图片容器的区域等于可视区域或者为可视区域的部分区域。可以利用若干个位于可视区域内的面积可设的矩形来获取图片容器。
[0045]其中，所述加载更新模块中，将位于图片容器中的图片的默认地址替换为真实的图片地址，加载替换后的图片。
[0046]本文中所描述的具体实施例仅仅是对本发明精神作举例说明。本发明所属技术领域的技术人员可以对所描述的具体实施例做各种各样的修改或补充或采用类似的方式替代，但并不会偏离本发明的精神或者超越所附权利要求书所定义的范围。
【主权项】
1.一种基于可视区域的图片加载方法，其特征在于，包括: 步骤1，接收用户对图片加载的触发事件； 步骤2，判断当前屏幕中的可视区域，获取可视区域中的图片容器;其中，所述图片容器是可视区域中用于显示图片的区域； 步骤3，加载位于图片容器中的图片。2.根据权利要求1所述的一种基于可视区域的图片加载方法，其特征在于，所述步骤I中，图片加载的触发事件包括:鼠标的滚动、点击，拖拽事件中的一种或多种。3.根据权利要求1所述的一种基于可视区域的图片加载方法，其特征在于，所述步骤2中，图片容器的区域等于可视区域或者为可视区域的部分区域。4.根据权利要求1所述的一种基于可视区域的图片加载方法，其特征在于，所述步骤2中，利用若干个位于可视区域内的面积可设的矩形来获取图片容器。5.根据权利要求1所述的一种基于可视区域的图片加载方法，其特征在于，所述步骤3中，将位于图片容器中的图片的默认地址替换为真实的图片地址，加载替换后的图片。6.一种基于可视区域的图片加载装置，其特征在于，包括: 事件监控模块，接收用户对图片加载的触发事件； 图片容器获取模块，判断当前屏幕中的可视区域，获取可视区域中的图片容器;其中，所述图片容器是可视区域中用于显示图片的区域； 加载更新模块，加载位于图片容器中的图片。7.根据权利要求6所述的一种基于可视区域的图片加载装置，其特征在于，事件监控模块中，图片加载的触发事件包括:鼠标的滚动、点击，拖拽事件中的一种或多种。8.根据权利要求6所述的一种基于可视区域的图片加载装置，其特征在于，所述图片容器获取模块中，图片容器的区域等于可视区域或者为可视区域的部分区域。9.根据权利要求6所述的一种基于可视区域的图片加载装置，其特征在于，所述图片容器获取模块中，利用若干个位于可视区域内的面积可设的矩形来获取图片容器。10.根据权利要求6所述的一种基于可视区域的图片加载装置，其特征在于，所述加载更新模块中，将位于图片容器中的图片的默认地址替换为真实的图片地址，加载替换后的图片。
【文档编号】G06F17/30GK106095995SQ201610456839
【公开日】2016年11月9日
【申请日】2016年6月21日
【发明人】杜伟
【申请人】武汉斗鱼网络科技有限公司