CN105677741A - 页面资源按需加载的方法及装置 - Google Patents

页面资源按需加载的方法及装置 Download PDF

Info

Publication number
CN105677741A
CN105677741A CN201511018051.8A CN201511018051A CN105677741A CN 105677741 A CN105677741 A CN 105677741A CN 201511018051 A CN201511018051 A CN 201511018051A CN 105677741 A CN105677741 A CN 105677741A
Authority
CN
China
Prior art keywords
picture
page
tag
address
scroll bar
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.)
Withdrawn
Application number
CN201511018051.8A
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.)
Triple Win Technology Shenzhen Co Ltd
Original Assignee
SHENZHEN RUIMING UNLIMITED 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 SHENZHEN RUIMING UNLIMITED TECHNOLOGY Co Ltd filed Critical SHENZHEN RUIMING UNLIMITED TECHNOLOGY Co Ltd
Priority to CN201511018051.8A priority Critical patent/CN105677741A/zh
Publication of CN105677741A publication Critical patent/CN105677741A/zh
Withdrawn legal-status Critical Current

Links

Classifications

    • 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
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明提出一种页面资源按需加载的方法及装置，包括：将页面中图片地址保存在伪图片标签内，并获取图片在页面中的位置信息放入图片位置数组中；对页面的滚动条进行事件监听，根据位置信息从所述图片位置数组中检索对应的图片；根据所述位置信息检索出图片对应的图片地址，并将所述图片地址从所述伪图片标签内移动至真图片标签内，进行加载。本发明中提供的页面资源按需加载的方法及装置，降低网页端服务器压力，降低网络占用以及减少流量使用，同时，加快网页加载速度。

Description

页面资源按需加载的方法及装置
技术领域
本发明涉及网页开发技术领域，特别涉及一种页面资源按需加载的方法及装置。
背景技术
目前，当用户浏览网页时，网页的加载机制是一次性加载网页中的所有图片，需占用大量网络带宽以及流量进行加载，导致用户所需网络以及流量产生高强度使用，同时，网页端服务器的压力也较大。因此，浏览网页时，使网页页面按需加载获取信息，便可降低网页端服务器压力，降低网络占用以及减少流量使用，同时，还可以加快网页加载速度。
发明内容
本发明的主要目的为提供一种页面资源按需加载的方法及装置，降低网页端服务器压力，降低网络占用以及减少流量使用，同时，还可以加快网页加载速度。
本发明提出一种页面资源按需加载的方法，包括：
将页面中图片地址保存在伪图片标签内，并获取图片在页面中的位置信息放入图片位置数组中；
对页面的滚动条进行事件监听，根据位置信息从所述图片位置数组中检索对应的图片；
根据所述位置信息检索出图片对应的图片地址，并将所述图片地址从所述伪图片标签内移动至真图片标签内，进行加载。
进一步地，所述获取图片在页面中的位置信息放入图片位置数组中的步骤为：
获取页面中的图片距离页面顶部的距离信息，并将所述距离信息放入图片位置数组中。
进一步地，所述将页面中图片地址保存在伪图片标签内的步骤为：
通过JavaScript脚本将图片地址暂时存放在伪图片标签内。
进一步地，所述对页面的滚动条进行事件监听，根据位置信息从所述图片位置数组中检索对应的图片的步骤包括：
通过JavaScript脚本对滚动条进行事件监听；当所述滚动条滚动时，滚动条对应页面中的图片发生改变，根据滚动条对应的图片的位置信息从所述图片位置数组中检索对应的图片。
进一步地，所述根据位置信息检索出图片对应的图片地址，并将所述图片地址从所述伪图片标签内移动至真图片标签内，进行加载的步骤包括：
将图片的图片地址从所述伪图片标签内移动至真图片标签内的src属性中，对图片自动进行加载。
本发明还提供了一种页面资源按需加载的装置，包括：
获取存放单元，将页面中图片地址存放在伪图片标签内，并获取图片在页面中的位置信息放入图片位置数组中；
监听检索单元，对页面的滚动条进行事件监听，根据位置信息从所述图片位置数组中检索对应的图片；
移动加载单元，根据所述位置信息检索出图片对应的图片地址，并将所述图片地址从所述伪图片标签内移动至真图片标签内，进行加载。
进一步地，所述获取存放单元获取页面中的图片距离页面顶部的距离信息，并将所述距离信息放入图片位置数组中。
进一步地，所述获取存放单元通过JavaScript脚本将页面中图片地址暂时存放在伪图片标签内。
进一步地，所述监听检索单元通过JavaScript脚本对滚动条进行事件监听；当所述滚动条滚动时，滚动条对应页面中的图片发生改变，根据滚动条对应的图片的位置信息从所述图片位置数组中检索对应的图片。
进一步地，所述移动加载单元将图片的图片地址从所述伪图片标签内移动至真图片标签内的src属性中，对图片自动进行加载。
本发明提出的页面资源按需加载的方法及装置，具有以下有益效果：
本发明提出的页面资源按需加载的方法及装置，将页面中的图片地址存放在伪图片标签中，避免图片一次性全部加载占用太多网络以及流量，可降低网页端服务器压力；通过监听滚动条位置对应页面中的图片，检索对应的图片，将其图片地址移动至真图片标签中，自动加载图片，实现页面资源按需加载，降低网页端服务器压力，提升网页加载速度。
附图说明
图1是本发明一实施例中的页面资源按需加载的方法示意图；
图2是本发明一实施例中的页面资源按需加载的方法流程示意图；
图3是本发明一实施例中的页面资源按需加载的装置结构示意图。
本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
参照图1，为本发明一实施例中的页面资源按需加载的方法示意图。
本发明一实施例中提出一种页面资源按需加载的方法，包括：
步骤S1，将页面中图片地址保存在伪图片标签内，并获取图片在页面中的位置信息放入图片位置数组中；
步骤S2，对页面的滚动条进行事件监听，根据位置信息从上述图片位置数组中检索对应的图片；
步骤S3，根据上述位置信息检索出图片对应的图片地址，并将上述图片地址从上述伪图片标签内移动至真图片标签内，进行加载。
上述步骤S1中，获取图片在页面中的位置信息放入图片位置数组中的具体步骤为：
获取页面中的图片距离页面顶部的距离信息，并将上述距离信息放入图片位置数组中。页面中的图片距离页面顶部的距离信息与滚动条对应，滚动条滚动时，所对应的图片也在发生滚动，监控滚动条的位置便可智能获取对应的图片。
其中，将图片地址保存在伪图片标签内的步骤为：
通过JavaScript脚本(JS，爪哇脚本)将页面中的图片地址暂时存放在伪图片标签内。将图片地址暂时存放在伪图片标签内，使得打开网页时，不会一次性加载所有图片，防止占用过多网络带宽以及流量，同时还可以降低服务器压力。
上述步骤S2中，对页面的滚动条进行事件监听，根据位置信息从上述图片位置数组中检索对应的图片的步骤包括：
通过JavaScript脚本对滚动条进行事件监听；当上述滚动条滚动时，滚动条对应页面中的图片发生改变，根据滚动条对应的图片的位置信息从上述图片位置数组中检索对应的图片。
进一步地，上述步骤S3中，根据位置信息检索出图片对应的图片地址，并将上述图片地址从上述伪图片标签内移动至真图片标签内，进行加载的步骤包括：
将图片的图片地址从上述伪图片标签内移动至真图片标签内的src(source)属性中，对图片自动进行加载。上述真图片标签为img标签，在HTML语言中，网页中插入图片所用标签为img标签，img标签的src属性用来指定图片具体地址信息，当图片地址放入img标签的src属性中时，页面便会对图片自动进行加载。
目前，当用户浏览网页时，多数网页都是一次性加载完网页内的所有图片，因此，需占用较多网络带宽以及耗费大量流量，同时加大网页端服务器压力，使得加载速度变慢。而在本实施例中，通过JavaScript脚本将页面中的图片地址放入伪图片标签(本实施例中，设置为vsrc标签)内，而非img标签，不会自动加载所有图片；当用户滚动滚动条时，页面可视区域发生改变。可视区域内对应的图片也会进行滚动，通过JavaScript脚本监控滚动条的位置对应可视区域内图片的位置信息，检索图片位置数组中的图片，检索出图片对应的图片地址，并将图片地址从伪图片标签内移动至img标签的src属性中，页面便会对图片自动进行加载。如此，便实现了根据页面的可视区域，按需加载可视区域内的图片，降低网页端服务器压力的同时，提升页面加载速度，减少网络带宽占用以及流量的使用。
参照图2，为本发明一实施例中的页面资源按需加载的方法流程示意图。
在本实施例中，包括：步骤S10，存放图片地址以及图片位置信息；通过JavaScript脚本将页面中的图片地址放入伪图片标签内，而非img标签，则不会自动加载页面所有图片；同时，将图片在页面中的位置信息放入图片位置数组中。
步骤S20，监控滚动条；当用户滚动滚动条时，页面可视区域发生改变。可视区域内对应的图片也会进行滚动，通过JavaScript脚本监控滚动条的位置对应可视区域内图片的位置信息。
步骤S30；滚动条位置改变时，检索位置数组中对应的图片。
步骤S40；将检索出图片对应的图片地址从伪图片标签内移动至img标签的src属性中。
步骤S50，页面对图片自动进行加载。
如此，便实现了根据页面的可视区域，按需加载可视区域内的图片，降低网页端服务器压力的同时，提升页面加载速度，减少网络带宽占用以及流量的使用。
参照图3.为本发明一实施例中的页面资源按需加载的装置结构示意图。
本发明一实施例中还提供了一种页面资源按需加载的装置，包括：
获取存放单元10，将页面中图片地址存放在伪图片标签内，并获取图片在页面中的位置信息放入图片位置数组中；
监听检索单元20，对页面的滚动条进行事件监听，根据位置信息从上述图片位置数组中检索对应的图片；
移动加载单元30，根据上述位置信息检索出图片对应的图片地址，并将上述图片地址从上述伪图片标签内移动至真图片标签内，进行加载。
上述获取存放单元10获取页面中的图片距离页面顶部的距离信息，并将上述距离信息放入图片位置数组中。页面中的图片距离页面顶部的距离信息与滚动条对应，滚动条滚动时，所对应的图片也在发生滚动，监控滚动条的位置便可智能获取对应的图片。
上述获取存放单元10通过JavaScript脚本将页面中图片地址暂时存放在伪图片标签内。将图片地址暂时存放在伪图片标签内，使得打开网页时，不会一次性加载所有图片，防止占用过多网络带宽以及流量，同时还可以降低服务器压力，提升页面加载速度。
上述监听检索单元20通过JavaScript脚本对滚动条进行事件监听；当上述滚动条滚动时，滚动条对应页面中的图片发生改变，根据滚动条对应的图片的位置信息从上述图片位置数组中检索对应的图片。
上述移动加载单元30将图片对应的图片地址从上述伪图片标签内移动至真图片标签内的src属性中，对图片自动进行加载。上述真图片标签为img标签，在HTML语言中，网页中插入图片所用标签为img标签，img标签的src属性用来指定图片具体地址信息，当图片地址放入img标签的src属性中时，页面便会对图片自动进行加载。
目前，当用户浏览网页时，多数网页都是一次性加载完网页内的所有图片，因此，需占用较多网络带宽以及耗费大量流量，同时加大网页端服务器压力，使得加载速度变慢。而在本实施例中，获取存放单元10通过JavaScript脚本将页面中的图片地址放入伪图片标签内，而非img标签，不会自动加载页面内的所有图片；当用户滚动滚动条时，页面可视区域发生改变，可视区域内对应的图片也会进行滚动；监听检索单元20通过JavaScript脚本监控滚动条的位置对应可视区域内图片的位置信息，检索图片位置数组中的图片，移动加载单元30则将检索出图片对应的图片地址从伪图片标签内移动至img标签的src属性中，页面便会对图片自动进行加载。如此，便实现了根据页面的可视区域，按需加载可视区域内的图片，降低网页端服务器压力的同时，提升页面加载速度，减少网络带宽占用以及流量的使用。
本实施例中的页面资源按需加载的装置运行流程包括，获取存放单元10通过JavaScript脚本将页面中的图片地址放入伪图片标签内，而非img标签，则不会自动加载页面所有图片；同时，获取存放单元10还将图片在页面中的位置信息放入图片位置数组中。
当用户滚动滚动条时，页面可视区域发生改变，可视区域内对应的图片也会进行滚动；监听检索单元20通过JavaScript脚本监控滚动条的位置对应可视区域内图片的位置信息。
滚动条位置改变时，监听检索单元20检索位置数组中对应的图片。
移动加载单元30将检索出图片对应的图片地址从伪图片标签内移动至img标签的src属性中。
移动加载单元30对图片自动进行加载。
如此，便实现了根据页面的可视区域，按需加载可视区域内的图片，降低网页端服务器压力的同时，提升页面加载速度，减少网络带宽占用以及流量的使用。
综上所述，为本发明实施例中提出的页面资源按需加载的方法及装置，通过将页面中的图片地址存放在伪图片标签中，避免图片一次性全部加载占用太多网络以及流量，可降低网页端服务器压力；通过监听滚动条位置对应页面中的图片，检索对应的图片，将其图片地址从伪图片标签中移动至真图片标签中，然后页面对其自动加载，实现页面资源按需加载，降低网页端服务器压力，提升网页加载速度。
以上所述仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种页面资源按需加载的方法，其特征在于，包括：
将页面中图片地址保存在伪图片标签内，并获取图片在页面中的位置信息放入图片位置数组中；
对页面的滚动条进行事件监听，根据位置信息从所述图片位置数组中检索对应的图片；
根据所述位置信息检索出图片对应的图片地址，并将所述图片地址从所述伪图片标签内移动至真图片标签内，进行加载。
2.根据权利要求1所述的页面资源按需加载的方法，其特征在于，所述获取图片在页面中的位置信息放入图片位置数组中的步骤为：
获取页面中的图片距离页面顶部的距离信息，并将所述距离信息放入图片位置数组中。
3.根据权利要求1所述的页面资源按需加载的方法，其特征在于，所述将页面中图片地址保存在伪图片标签内的步骤为：
通过JavaScript脚本将页面中的图片地址暂时存放在伪图片标签内。
4.根据权利要求1所述的页面资源按需加载的方法，其特征在于，所述对页面的滚动条进行事件监听，根据位置信息从所述图片位置数组中检索对应的图片的步骤包括：
通过JavaScript脚本对滚动条进行事件监听；当所述滚动条滚动时，滚动条对应页面中的图片发生改变，根据滚动条对应的图片的位置信息从所述图片位置数组中检索对应的图片。
5.根据权利要求1所述的页面资源按需加载的方法，其特征在于，所述根据位置信息检索出图片对应的图片地址，并将所述图片地址从所述伪图片标签内移动至真图片标签内，进行加载的步骤包括：
将图片的图片地址从所述伪图片标签内移动至真图片标签内的src属性中，对图片自动进行加载。
6.一种页面资源按需加载的装置，其特征在于，包括：
获取存放单元，将页面中图片地址存放在伪图片标签内，并获取图片在页面中的位置信息放入图片位置数组中；
监听检索单元，对页面的滚动条进行事件监听，根据位置信息从所述图片位置数组中检索对应的图片；
移动加载单元，根据所述位置信息检索出图片对应的图片地址，并将所述图片地址从所述伪图片标签内移动至真图片标签内，进行加载。
7.根据权利要求6所述的页面资源按需加载的装置，其特征在于，所述获取存放单元获取页面中的图片距离页面顶部的距离信息，并将所述距离信息放入图片位置数组中。
8.根据权利要求6所述的页面资源按需加载的装置，其特征在于，所述获取存放单元通过JavaScript脚本将页面中图片地址暂时存放在伪图片标签内。
9.根据权利要求6所述的页面资源按需加载的装置，其特征在于，所述监听检索单元通过JavaScript脚本对滚动条进行事件监听；当所述滚动条滚动时，滚动条对应页面中的图片发生改变，根据滚动条对应的图片的位置信息从所述图片位置数组中检索对应的图片。
10.根据权利要求6所述的页面资源按需加载的装置，其特征在于，所述移动加载单元将图片的图片地址从所述伪图片标签内移动至真图片标签内的src属性中，对图片自动进行加载。
CN201511018051.8A 2015-12-29 2015-12-29 页面资源按需加载的方法及装置 Withdrawn CN105677741A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201511018051.8A CN105677741A (zh) 2015-12-29 2015-12-29 页面资源按需加载的方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201511018051.8A CN105677741A (zh) 2015-12-29 2015-12-29 页面资源按需加载的方法及装置

Publications (1)

Publication Number Publication Date
CN105677741A true CN105677741A (zh) 2016-06-15

Family

ID=56297917

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201511018051.8A Withdrawn CN105677741A (zh) 2015-12-29 2015-12-29 页面资源按需加载的方法及装置

Country Status (1)

Country Link
CN (1) CN105677741A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107040584A (zh) * 2017-02-22 2017-08-11 阿里巴巴集团控股有限公司 客户端下载图片的方法及装置
CN111506840A (zh) * 2019-01-11 2020-08-07 北京京东尚科信息技术有限公司 客户端内嵌网页的加载方法、系统、电子设备、存储介质
CN111767492A (zh) * 2020-06-30 2020-10-13 中国平安财产保险股份有限公司 图片加载方法、装置、计算机设备及存储介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102760133A (zh) * 2011-04-28 2012-10-31 腾讯科技（深圳）有限公司 网页加载方法、系统、浏览器、终端及服务器
CN103853716A (zh) * 2012-11-28 2014-06-11 纽海信息技术（上海）有限公司 网页显示系统及方法
CN103853729A (zh) * 2012-11-29 2014-06-11 腾讯科技（深圳）有限公司 页面加载方法及其系统
CN103914302A (zh) * 2014-04-02 2014-07-09 北京京东尚科信息技术有限公司 一种网页加载进度监控方法和装置
CN104423839A (zh) * 2013-08-30 2015-03-18 中兴通讯股份有限公司 浏览器资源显示方法和装置
CN104536973A (zh) * 2014-12-03 2015-04-22 北京奇虎科技有限公司 图片识别的方法和浏览器客户端

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102760133A (zh) * 2011-04-28 2012-10-31 腾讯科技（深圳）有限公司 网页加载方法、系统、浏览器、终端及服务器
CN103853716A (zh) * 2012-11-28 2014-06-11 纽海信息技术（上海）有限公司 网页显示系统及方法
CN103853729A (zh) * 2012-11-29 2014-06-11 腾讯科技（深圳）有限公司 页面加载方法及其系统
CN104423839A (zh) * 2013-08-30 2015-03-18 中兴通讯股份有限公司 浏览器资源显示方法和装置
CN103914302A (zh) * 2014-04-02 2014-07-09 北京京东尚科信息技术有限公司 一种网页加载进度监控方法和装置
CN104536973A (zh) * 2014-12-03 2015-04-22 北京奇虎科技有限公司 图片识别的方法和浏览器客户端

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107040584A (zh) * 2017-02-22 2017-08-11 阿里巴巴集团控股有限公司 客户端下载图片的方法及装置
CN107040584B (zh) * 2017-02-22 2020-04-17 阿里巴巴集团控股有限公司 客户端下载图片的方法及装置
CN111506840A (zh) * 2019-01-11 2020-08-07 北京京东尚科信息技术有限公司 客户端内嵌网页的加载方法、系统、电子设备、存储介质
CN111767492A (zh) * 2020-06-30 2020-10-13 中国平安财产保险股份有限公司 图片加载方法、装置、计算机设备及存储介质

Similar Documents

Publication Publication Date Title
CN103139292B (zh) 在http代理中处理图片的方法、代理服务器及系统
US20180191798A1 (en) Methods and systems for server-side rendering of native content for presentation
US8825749B2 (en) Method of tracking offline user interaction in a rendered document on a mobile device
US20150248302A1 (en) Method, apparatus, server and system for implementing web application
CN107450900B (zh) 一种截图方法及装置
CN103353886A (zh) 预览网页的方法及系统
CN105095280A (zh) 一种浏览器缓存方法和装置
CN102970343A (zh) 一种显示推送信息的方法和装置
CN105786455B (zh) 一种数据处理方法、装置及终端
CN104965914A (zh) 一种页面显示方法及装置
CN102298599A (zh) 离线浏览网页方法及其系统
CN101808114A (zh) 实现网页访问的方法、系统及前端服务器
CN107038194B (zh) 一种页面跳转方法和装置
US20230334113A1 (en) Image processing method and apparatus, and computer readable storage medium
CN105677741A (zh) 页面资源按需加载的方法及装置
CN101753380A (zh) 监控存储器消耗
CN103365877B (zh) 对网页进行转码后建立目录的方法以及服务器
CN103116645A (zh) 移动设备浏览网页的方法及装置
CN102769641A (zh) 一种网页内容自适应控制的展示方法及系统
CN103678343A (zh) 提示网页加载进度的方法和装置
CN104102636A (zh) 一种页面数据的统计、呈现方法及装置
CN103353842A (zh) 一种网页的加载方法和装置
CN104881452B (zh) 一种资源地址的嗅探方法、装置及系统
CN113190321A (zh) 一种用于应用程序页面上拉刷新的方法及设备
CN103488735A (zh) 终端浏览器页面刷新显示的方法及终端

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
TA01 Transfer of patent application right

Effective date of registration: 20190114

Address after: 518000 Building 405A, 01B, Zone E, Zhiheng Industrial Park, Nantou Street, Nanshan District, Shenzhen City, Guangdong Province

Applicant after: Shenzhen win win Technology Co., Ltd.

Address before: 518000 Meilong Road and Minwang Road, Minzhi Street, Longhua New District, Shenzhen City, Guangdong Province

Applicant before: SHENZHEN RUIMING UNLIMITED TECHNOLOGY CO., LTD.

TA01 Transfer of patent application right
WW01 Invention patent application withdrawn after publication

Application publication date: 20160615

WW01 Invention patent application withdrawn after publication