浏览器网页图片资源的加载方法、装置、设备及存储介质制造方法及图纸

本发明专利技术提供了一种浏览器网页图片资源的加载方法、装置、设备及存储介质，所述加载方法包括监听网页滚动事件；根据所述网页滚动事件获取得到进入浏览器的可视区域内的图片集；将所述图片集中各个图片的链接地址放入所述网页图片标签的src属性中；获取各个所述图片在所述网页中的位置以及各个所述图片的占用存储空间大小；基于各个所述图片在所述网页中的位置以及各个所述图片的占用存储空间大小确定各个所述图片在所述可视区域内的加载顺序；基于所述加载顺序将各个所述图片显示在所述可视区域的所述网页中。本发明专利技术的方法在加载大量图片时，根据可视区域进行加载并综合考虑了图片大小和图片在网页中的位置的因素，图片加载显示效果更佳。载显示效果更佳。载显示效果更佳。

Loading method, device, device and storage medium of browser web page image resources

【技术实现步骤摘要】
浏览器网页图片资源的加载方法、装置、设备及存储介质


[0001]本专利技术涉及浏览器
，尤其涉及一种浏览器网页图片资源的加载方法、装置、设备及存储介质。

技术介绍

[0002]随着互联网的行业发展，网页上图片的呈现数量变得越来越多，出现大量以图片内容为展示中心的网站，图片的增加，意味着网站内容的呈现需要更长的时间或者更高的带宽，与此同时如何加快网站打开的速度，尤其是当网站的页面中含有大量图片内容时，成为网页显示优化的重要方向。目前，网站在需要显示大量的图片时，图片的加载顺序都是随机的，在网速存在限制的条件下，导致网站图片显示的视觉观感较差。
[0003]因此，现有技术还有待于改进和发展。

技术实现思路

[0004]本专利技术的主要目的在于解决现有浏览器网页图片资源的加载方法，图片加载无序，视觉观感不佳的技术问题。
[0005]本专利技术第一方面提供了一种浏览器网页图片资源的加载方法，所述浏览器网页图片资源的加载方法包括：
[0006]监听网页滚动事件；
[0007]根据所述网页滚动事件获取得到进入浏览器的可视区域内的图片集；
[0008]将所述图片集中各个图片的链接地址放入所述网页图片标签的src属性中；
[0009]获取各个所述图片在所述网页中的位置以及各个所述图片的占用存储空间大小；
[0010]基于各个所述图片在所述网页中的位置以及各个所述图片的占用存储空间大小确定各个所述图片在所述可视区域内的加载顺序；
[0011]基于所述加载顺序将各个所述图片显示在所述可视区域的所述网页中。
[0012]在本专利技术第一方面一种可选的实施方式中，所述根据所述网页滚动事件获取得到进入浏览器的可视区域内的图片集包括：
[0013]获取所述网页的图片列表；
[0014]获取所述图片列表中各个图片到所述网页顶部的距离；
[0015]获取所述可视区域的第一高度；
[0016]获取所述网页滚过区域的第二高度；
[0017]若所述第一高度与所述第二高度之和大于等于所述图片到所述网页顶部的距离，则判定所述图片进入到了所述浏览器的可视区域内；
[0018]收集所有进入到所述浏览器的所述可视区域的所述图片得到所述图片集。
[0019]在本专利技术第一方面一种可选的实施方式中，所述获取各个所述图片在所述网页中的位置以及各个所述图片的占用存储空间大小之前包括：
[0020]对所述网页进行区域划分，将所述网页均分成作左区、中区和右区；
[0021]设定位于所述左区内的所述图片的第一权重指数为第一值，设定位于所述中区内的所述图片的第一权重指数为第二值，设定位于所述右区内的所述图片的第一权重指数为第三值；
[0022]确定各个所述图片的占用存储空间大小的最大值，将零与所述最大值之间均分成第一区间、第二区间和第三区间；
[0023]设定占用存储空间大小位于所述第一区间内的所述图片的第二权重指数为第四值，设定占用存储空间大小位于所述第二区间内的所述图片的第二权重指数为第五值，设定占用存储空间大小位于所述第三区间内的所述图片的第二权重指数为第六值。
[0024]在本专利技术第一方面一种可选的实施方式中，所述基于各个所述图片在所述网页中的位置以及各个所述图片的占用存储空间大小确定各个所述图片在所述可视区域内的加载顺序包括：
[0025]计算各个所述图片的优先级指数，所述图片的所述优先级指数＝所述图片确定得到的所述第一权重指数+所述图片确定得到的所述第二权重指数；
[0026]对各个所述图片的所述优先级指数进行排序，得到各个所述图片的加载顺序。
[0027]在本专利技术第一方面一种可选的实施方式中，所述对各个所述图片的所述优先级指数进行排序，得到各个所述图片的加载顺序之后包括：
[0028]若在所述加载顺序中存在所述优先级指数相同的多个所述图片，则根据所述图片在所述网页的图片列表中的先后顺序确定多个所述图片的所述加载顺序。
[0029]在本专利技术第一方面一种可选的实施方式中，所述第二值>所述第一值>所述第三值；所述第一区间的数值范围<所述第二区间的数值范围<所述第三区间的数值范围，所述第四值>所述第五值>所述第六值。
[0030]在本专利技术第一方面一种可选的实施方式中，所述网页的滚动方向为向上滚动。
[0031]本专利技术第二方面公开了一种浏览器网页图片资源的加载装置，所述浏览器网页图片资源的加载装置包括：
[0032]监听模块，用于监听网页滚动事件；
[0033]第一获取模块，用于根据所述网页滚动事件获取得到进入浏览器的可视区域内的图片集；
[0034]链接模块，用于将所述图片集中各个图片的链接地址放入所述网页图片标签的src属性中；
[0035]第二获取模块，用于获取各个所述图片在所述网页中的位置以及各个所述图片的占用存储空间大小；
[0036]排序模块，用于基于各个所述图片在所述网页中的位置以及各个所述图片的占用存储空间大小确定各个所述图片在所述可视区域内的加载顺序；
[0037]显示模块，用于基于所述加载顺序将各个所述图片显示在所述可视区域的所述网页中。
[0038]本专利技术第三方面提供了一种浏览器网页图片资源的加载设备，所述浏览器网页图片资源的加载设备包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互连；
[0039]所述至少一个处理器调用所述存储器中的所述指令，以使得所述浏览器网页图片
资源的加载设备执行如上述任一项所述的浏览器网页图片资源的加载方法。
[0040]本专利技术第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如上述任一项所述的浏览器网页图片资源的加载方法。
[0041]有益效果：本专利技术提供了一种浏览器网页图片资源的加载方法、装置、设备及存储介质，所述加载方法包括监听网页滚动事件；根据所述网页滚动事件获取得到进入浏览器的可视区域内的图片集；将所述图片集中各个图片的链接地址放入所述网页图片标签的src属性中；获取各个所述图片在所述网页中的位置以及各个所述图片的占用存储空间大小；基于各个所述图片在所述网页中的位置以及各个所述图片的占用存储空间大小确定各个所述图片在所述可视区域内的加载顺序；基于所述加载顺序将各个所述图片显示在所述可视区域的所述网页中。本专利技术的方法在加载大量图片时，根据可视区域进行加载并综合考虑了图片大小和图片在网页中的位置的因素，图片加载显示效果更佳。
附图说明
[0042]图1为本专利技术一种浏览器网页图片资源的加载方法的一个实施例示意图；
[0043]图2为本专利技术一种浏览器网页图片资源的加载装置的一个实施例示意图；
[0044]图3为本专利技术本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种浏览器网页图片资源的加载方法，其特征在于，所述浏览器网页图片资源的加载方法包括：监听网页滚动事件；根据所述网页滚动事件获取得到进入浏览器的可视区域内的图片集；将所述图片集中各个图片的链接地址放入所述网页图片标签的src属性中；获取各个所述图片在所述网页中的位置以及各个所述图片的占用存储空间大小；基于各个所述图片在所述网页中的位置以及各个所述图片的占用存储空间大小确定各个所述图片在所述可视区域内的加载顺序；基于所述加载顺序将各个所述图片显示在所述可视区域的所述网页中。2.根据权利要求1所述的浏览器网页图片资源的加载方法，其特征在于，所述根据所述网页滚动事件获取得到进入浏览器的可视区域内的图片集包括：获取所述网页的图片列表；获取所述图片列表中各个图片到所述网页顶部的距离；获取所述可视区域的第一高度；获取所述网页滚过区域的第二高度；若所述第一高度与所述第二高度之和大于等于所述图片到所述网页顶部的距离，则判定所述图片进入到了所述浏览器的可视区域内；收集所有进入到所述浏览器的所述可视区域的所述图片得到所述图片集。3.根据权利要求1所述的浏览器网页图片资源的加载方法，其特征在于，所述获取各个所述图片在所述网页中的位置以及各个所述图片的占用存储空间大小之前包括：对所述网页进行区域划分，将所述网页均分成作左区、中区和右区；设定位于所述左区内的所述图片的第一权重指数为第一值，设定位于所述中区内的所述图片的第一权重指数为第二值，设定位于所述右区内的所述图片的第一权重指数为第三值；确定各个所述图片的占用存储空间大小的最大值，将零与所述最大值之间均分成第一区间、第二区间和第三区间；设定占用存储空间大小位于所述第一区间内的所述图片的第二权重指数为第四值，设定占用存储空间大小位于所述第二区间内的所述图片的第二权重指数为第五值，设定占用存储空间大小位于所述第三区间内的所述图片的第二权重指数为第六值。4.根据权利要求3所述的浏览器网页图片资源的加载方法，其特征在于，所述基于各个所述图片在所述网页中的位置以及各个所述图片的占用存储空间大小确定各个所述图片在所述可视区域内的加载顺序包括：计算各个所述图片的优先级指数，所述图片的所述优先级指数＝所述图片确定得到的所述第一权重指数+所述图片确定得到的所述第...

【专利技术属性】
技术研发人员：刘旭，
申请(专利权)人：深圳市大头兄弟科技有限公司，
类型：发明
国别省市：