【技术实现步骤摘要】
一种前端加载图片的方法及系统
本专利技术属于数据中心资源管理
，具体涉及一种前端加载图片的方法及系统。
技术介绍
B/S，是Browser/Server的缩写，浏览器/服务器模式。AJAX，是AsyncJavascriptAndXML的缩写，交互式网页应用开发技术。随着现代web浏览器技术的飞速发展，特别是AJAX技术的广泛应用，使得Browser/Server结构的使用越来越多，随之而来的web前端性能优化问题也日益突出，尤其是用户访问浏览器页面总会遇到加载图片不及时的情况，针对该问题，较好的办法是图片预加载，图片预先加载到浏览器中，访问者便可顺利访问网页，获取更好的用户体验。目前图片预加载主要有CSS预加载和JavaScript预加载。使用CSS，通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变，当它们在Web页面的其他地方被调用时，浏览器就会在渲染过程中使用预加载(缓存)的图片。简单、高效，不需要任何JavaScript。该方法虽然高效，但加载的图片会同...
【技术保护点】
1.一种前端加载图片的方法，其特征在于，包括如下步骤：/nS 1.在web服务端将每个图像文件分解为二维数组，并执行数据切割，将二维数组划分为若干数组集合；/nS2.记录每个数组集合的图像特征到对应图像文件的dom节点中；/nS3.用户通过web客户端登录系统时，判断当前页面dom节点中是否有图像数据；/n若有，则获取待加载图像文件的dom节点；/nS4.从dom节点中取出数组集合及图像特征，执行数据重构，将数据集合重构为二维数组，再将二维数组还原为图像文件，实现图片加载。/n
【技术特征摘要】
1.一种前端加载图片的方法，其特征在于，包括如下步骤：
S1.在web服务端将每个图像文件分解为二维数组，并执行数据切割，将二维数组划分为若干数组集合；
S2.记录每个数组集合的图像特征到对应图像文件的dom节点中；
S3.用户通过web客户端登录系统时，判断当前页面dom节点中是否有图像数据；
若有，则获取待加载图像文件的dom节点；
S4.从dom节点中取出数组集合及图像特征，执行数据重构，将数据集合重构为二维数组，再将二维数组还原为图像文件，实现图片加载。
2.如权利要求1所述的前端加载图片的方法，其特征在于，步骤S1具体步骤如下：
S11.在web服务端根据图像文件像素单元位置偏移将每个图像文件分解为二维数组；
S12.设定图像像素值差异阈值V；
S13.遍历图像文件二维数组，将差异小于图像像素值差异阈值V的图像像素单元的二维数组划分为一个数组集合，生成若干个数组集合。
3.如权利要求2所述的前端加载图片的方法，其特征在于，步骤S13具体步骤如下：
S131.按照从左至右，从上至下顺序遍历图像文件的二维数组，截取N*N数组，其中N大于等于2；
S132.判断截取数组内像素单元像素值是否相等或者最大误差不超过图像像素值差异阈值V；
若是，则N加1，将数组扩大，返回步骤S132；
若否，则记录N*N数组的平均像素值和该数组集合的位置偏移及数组集合大小；
S133.判断图像文件二维数组是否切割完毕；
若是，进入S2；
若否，返回步骤S131。
4.如权利要求3所述的前端加载图片的方法，其特征在于，步骤S4具体步骤如下：
S41.从dom节点中取出每个数组集合；
S42.根据每个数组集合的平均像素值及数组集合大小将每个数组集合扩充为N*N的数组；
S43.再根据每个数组集合的位置偏移将每个N*N的数组重构为二维数组；
S44.根据二维数组还原图像文件，实现图片加载。
5.一种前端加载图片的系统，其特征在于，包括：
数组集合生成模块(1)，用于在web服务端将每个图像文件分解为二维数组，并执行数据切割，将二维数组划分为若干数组集合；
Dom节点记录模块(2)，用于记录每个数组集合的图像特征到对...
【专利技术属性】
技术研发人员：马聪，张建刚，
申请(专利权)人：苏州浪潮智能科技有限公司，
类型：发明
国别省市：江苏;32
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。