页面资源按需加载的方法及装置的制造方法
【技术领域】
[0001]本发明涉及网页开发技术领域，特别涉及一种页面资源按需加载的方法及装置。
【背景技术】
[0002]目前，当用户浏览网页时，网页的加载机制是一次性加载网页中的所有图片，需占用大量网络带宽以及流量进行加载，导致用户所需网络以及流量产生高强度使用，同时，网页端服务器的压力也较大。因此，浏览网页时，使网页页面按需加载获取信息，便可降低网页端服务器压力，降低网络占用以及减少流量使用，同时，还可以加快网页加载速度。
【发明内容】
[0003]本发明的主要目的为提供一种页面资源按需加载的方法及装置，降低网页端服务器压力，降低网络占用以及减少流量使用，同时，还可以加快网页加载速度。
[0004]本发明提出一种页面资源按需加载的方法，包括:
[0005]将页面中图片地址保存在伪图片标签内，并获取图片在页面中的位置信息放入图片位置数组中；
[0006]对页面的滚动条进行事件监听，根据位置信息从所述图片位置数组中检索对应的图片；
[0007]根据所述位置信息检索出图片对应的图片地址，并将所述图片地址从所述伪图片标签内移动至真图片标签内，进行加载。
[0008]进一步地，所述获取图片在页面中的位置信息放入图片位置数组中的步骤为:
[0009]获取页面中的图片距离页面顶部的距离信息，并将所述距离信息放入图片位置数组中。
[0010]进一步地，所述将页面中图片地址保存在伪图片标签内的步骤为:
[0011 ]通过JavaScript脚本将图片地址暂时存放在伪图片标签内。
[0012]进一步地，所述对页面的滚动条进行事件监听，根据位置信息从所述图片位置数组中检索对应的图片的步骤包括:
[0013]通过JavaScript脚本对滚动条进行事件监听；当所述滚动条滚动时，滚动条对应页面中的图片发生改变，根据滚动条对应的图片的位置信息从所述图片位置数组中检索对应的图片。
[0014]进一步地，所述根据位置信息检索出图片对应的图片地址，并将所述图片地址从所述伪图片标签内移动至真图片标签内，进行加载的步骤包括:
[0015]将图片的图片地址从所述伪图片标签内移动至真图片标签内的src属性中，对图片自动进行加载。
[0016]本发明还提供了一种页面资源按需加载的装置，包括:
[0017]获取存放单元，将页面中图片地址存放在伪图片标签内，并获取图片在页面中的位置信息放入图片位置数组中；
[0018]监听检索单元，对页面的滚动条进行事件监听，根据位置信息从所述图片位置数组中检索对应的图片；
[0019]移动加载单元，根据所述位置信息检索出图片对应的图片地址，并将所述图片地址从所述伪图片标签内移动至真图片标签内，进行加载。
[0020]进一步地，所述获取存放单元获取页面中的图片距离页面顶部的距离信息，并将所述距离信息放入图片位置数组中。
[0021 ]进一步地，所述获取存放单元通过JavaScript脚本将页面中图片地址暂时存放在伪图片标签内。
?0022] 进一步地，所述监听检索单元通过JavaScript脚本对滚动条进行事件监听；当所述滚动条滚动时，滚动条对应页面中的图片发生改变，根据滚动条对应的图片的位置信息从所述图片位置数组中检索对应的图片。
[0023]进一步地，所述移动加载单元将图片的图片地址从所述伪图片标签内移动至真图片标签内的src属性中，对图片自动进行加载。
[0024]本发明提出的页面资源按需加载的方法及装置，具有以下有益效果:
[0025]本发明提出的页面资源按需加载的方法及装置，将页面中的图片地址存放在伪图片标签中，避免图片一次性全部加载占用太多网络以及流量，可降低网页端服务器压力;通过监听滚动条位置对应页面中的图片，检索对应的图片，将其图片地址移动至真图片标签中，自动加载图片，实现页面资源按需加载，降低网页端服务器压力，提升网页加载速度。
【附图说明】
[0026]图1是本发明一实施例中的页面资源按需加载的方法示意图；
[0027]图2是本发明一实施例中的页面资源按需加载的方法流程示意图；
[0028]图3是本发明一实施例中的页面资源按需加载的装置结构示意图。
[0029]本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
【具体实施方式】
[0030]应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
[0031]参照图1，为本发明一实施例中的页面资源按需加载的方法示意图。
[0032]本发明一实施例中提出一种页面资源按需加载的方法，包括:
[0033]步骤SI，将页面中图片地址保存在伪图片标签内，并获取图片在页面中的位置信息放入图片位置数组中；
[0034]步骤S2，对页面的滚动条进行事件监听，根据位置信息从上述图片位置数组中检索对应的图片；
[0035]步骤S3，根据上述位置信息检索出图片对应的图片地址，并将上述图片地址从上述伪图片标签内移动至真图片标签内，进行加载。
[0036]上述步骤SI中，获取图片在页面中的位置信息放入图片位置数组中的具体步骤为:
[0037]获取页面中的图片距离页面顶部的距离信息，并将上述距离信息放入图片位置数组中。页面中的图片距离页面顶部的距离信息与滚动条对应，滚动条滚动时，所对应的图片也在发生滚动，监控滚动条的位置便可智能获取对应的图片。
[0038]其中，将图片地址保存在伪图片标签内的步骤为:
[0039]通过JavaScript脚本(JS，爪哇脚本)将页面中的图片地址暂时存放在伪图片标签内。将图片地址暂时存放在伪图片标签内，使得打开网页时，不会一次性加载所有图片，防止占用过多网络带宽以及流量，同时还可以降低服务器压力。
[0040]上述步骤S2中，对页面的滚动条进行事件监听，根据位置信息从上述图片位置数组中检索对应的图片的步骤包括:
[0041]通过JavaScript脚本对滚动条进行事件监听；当上述滚动条滚动时，滚动条对应页面中的图片发生改变，根据滚动条对应的图片的位置信息从上述图片位置数组中检索对应的图片。
[0042]进一步地，上述步骤S3中，根据位置信息检索出图片对应的图片地址，并将上述图片地址从上述伪图片标签内移动至真图片标签内，进行加载的步骤包括:
[0043]将图片的图片地址从上述伪图片标签内移动至真图片标签内的src(source)属性中，对图片自动进行加载。上述真图片标签为img标签，在HTML语言中，网页中插入图片所用标签为img标签，img标签的src属性用来指定图片具体地址信息，当图片地址放入img标签的src属性中时，页面便会对图片自动进行加载。
[0044]目前，当用户浏览网页时，多数网页都是一次性加载完网页内的所有图片，因此，需占用较多网络带宽以及耗费大量流量，同时加大网页端服务器压力，使得加载速度变慢。而在本实施例中，通过JavaScript脚本将页面中的图片地址放入伪图片标签(本实施例中，设置为vsrc标签)内，而非img标签，不会自动加载所有图片；当用户滚动滚动条时，页面可视区域发生改变。可视区域内对应的图片也会进行滚动，通过JavaScript脚本监控滚动条的位置对应可视区域内图片的位置信息，检索图片位置数组中的图片，检索出图片对应的图片地址，并将图片地址从伪图片标签内移动至img标签的src属性中，页面便会对图片自动进行加载。如此，便实现了根据页面的可视区域，按需加载可视区域内的图片，降低网页端服务器压力的同时，提升页面加载速度，减少网络带宽占用以及流量的使用。
[0045]参照图2，为本发明一实施例中的页面资源按需加载的方法流程示意图。
[0046]在本实施例中，包括:步骤S10，存放图片地址以及图片位置信息;通过JavaScript脚本将页面中的图片地址放入伪图片标签内，而非img标签，则不会自动加载页面所有图片；同时，将图片在页面中的位置信息放入图片位置数组中。
[0047]步骤S20，监控滚动条;当用户滚动滚动条时，页面可视区域发生改变。可视区域内对应的图片也会进行滚动，通过JavaScript脚本监控滚动条的位置对应可视区域内图片的位置信息。
[0048]步骤S30;滚动条位置改变时，检索位置数组中对应的图片。