页面加载方法、装置和电子设备制造方法及图纸

本发明专利技术提供了一种页面加载方法、装置和电子设备，该方法包括：响应于目标浏览器中的指定页面的加载请求，检测目标浏览器是否支持显示WebP格式的图片；如果支持显示WebP格式的图片，通过指定页面的层叠样式表加载WebP格式的图片，将加载的图片显示在指定页面中。该方式中，预先将页面能够显示的图片对应的WebP格式的图片链接和非WebP格式的图片链接，存储至页面对应的层叠样式表中；在加载该页面时，根据浏览器支持显示的图片格式，通过层叠样式表存储的图片链接即可获取到显示在页面中的图片，无需替换页面资源中的图片链接，从而提高了页面加载速度，也提升了用户体验。也提升了用户体验。也提升了用户体验。

【技术实现步骤摘要】
页面加载方法、装置和电子设备


[0001]本专利技术涉及页面开发
，尤其是涉及一种页面加载方法、装置和电子设备。

技术介绍

[0002]随着网络页面显示效果的日益成熟，图片在浏览器中的使用越来越广泛。传统的页面开发中通常直接使用JPG格式或者PNG格式的图片，但是该格式的图片的压缩效率较低，导致图片网络传输量巨大，用户浏览网页的体验较差。
[0003]由于WebP格式是能够同时提供有损压缩和无损压缩的图片格式，使得WebP格式的图片能够减小图片资源的大小，同时还能保证与非WebP格式图片相同的图片显示效果，可节约加载图片资源的流量消耗。因此，相关技术中提供了图片格式转换方式，该方式通过资源加载器，对浏览器待显示的网页对应的网页资源进行检测，如果通过资源加载器检测到网页资源中存在非WebP格式图片的图片链接，且浏览器支持显示WebP格式的图片，则将网页资源中的非WebP格式图片的图片链接替换为WebP格式图片的图片链接。但是，该方式只修改了页面结构中的图片链接，导致每次加载页面时都需要检测和替换页面资源中的图片链接，页面加载时间较长本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面加载方法，其特征在于，所述方法包括：响应于目标浏览器中的指定页面的加载请求，检测所述目标浏览器是否支持显示WebP格式的图片；如果支持显示所述WebP格式的图片，通过所述指定页面的层叠样式表加载所述WebP格式的图片，将加载的图片显示在所述指定页面中；其中，所述层叠样式表中存储有所述指定页面能够显示的图片对应的所述WebP格式的图片链接和非WebP格式的图片链接。2.根据权利要求1所述的方法，其特征在于，所述层叠样式表中预先存储有所述指定页面能够显示的图片对应的非WebP格式的图片链接；所述层叠样式表中存储的所述指定页面能够显示的图片对应的WebP格式的图片链接，通过下述方式获得：通过预设的构建工具，将所述指定页面能够显示的图片中的非WebP格式的图片转换为所述WebP格式的图片，得到所述WebP格式的图片链接；将所述WebP格式的图片链接保存至所述层叠样式表。3.根据权利要求2所述的方法，其特征在于，所述构建工具包括Webpack工具。4.根据权利要求1所述的方法，其特征在于，所述检测所述目标浏览器是否支持显示WebP格式的图片的步骤，包括：检测所述目标浏览器是否能够成功绘制所述WebP格式的图片；如果成功绘制，确定所述目标浏览器支持显示所述WebP格式的图片。5.根据权利要求4所述的方法，其特征在于，所述检测所述目标浏览器是否能够成功绘制所述WebP格式的图片的步骤，包括：检测所述目标浏览器是否能够使用预设绘制方式，绘制一张指定大小的WebP格式的图片；如果能够绘制所述指定大小的WebP格式的图片，确定所述目标浏览器能够成功绘制所述WebP格式的图片。6.根据权利要求1所述的方法，其特征在于，所述如果支持显示所述WebP格式的图片，通过所述指定页面的层叠样式表加载所述WebP格式的图片的步骤，包括：如果所述目标浏览器支持显示所述WebP格式的图片，将预设的第一类名添加至所述指定页面的页面标签中；根据所述指定页面的页面标签，通过所述指定页面的层叠样式表加载所述WebP格式的图片。7.根据权利要求6所述的方法，其特征在于，所述层叠样式表中还包括：所述WebP格式的图片链接对应的第一类名和所述非WebP格式的图片链接对应的第二类名；所述根据所述指定页面的页面标签，通过所述指定页面的...

【专利技术属性】
技术研发人员：唐钊，倪成华，
申请(专利权)人：网易杭州网络有限公司，
类型：发明
国别省市：