[发明专利]智能图片懒加载方法

说明书

本发明公开了一种结合图片裁剪技术和缓存技术，可以轻松的实现图片按需加载服务，避免资源浪费和性能损失，从而提高用户访问网站的用户体验的智能图片懒加载方法。所述方法步骤包括设置服务端支持按照参数裁图；根据获取参数判断用户是否需要进行图片资源优化加载。(1)自动根据document.devicePixelRatio的值来加载合适的图片。(2)多域名时，通过一定的算法保证同一图片每次加载都是在固定的域上配合图片缓存技术可以实现第二次加载同一图片时直接从本地缓存取。

技术领域

本发明涉及计算机通信技术领域，尤其涉及一种图片加载方法。

背景技术

随着web页面的内容越来越丰富，图片资源的使用也随之增多。这个时候带来的资源浪费问题和性能问题就变的更加突出。例如：图片高清屏适配问题；响应式图片适配问题；多域名加载图时保证图片域名分配稳定问题等。以上问题如果处理不当，就会导致图片资源的加载浪费，进而影响用户体验。本方案就是在这个背景下诞生的，主要应用在web应用上用以解决多域名、多屏幕图片加载时资源浪费和性能问题。

但是现有技术中的技术方案存在一些不足之处：

(1)在实际应用中我们通常在高清屏幕使用高清图片，如果在低清屏还使用高清屏就是资源的浪费，需要有一个方案来解决如何根据屏幕分辨率不一样而加重不同清晰度的图片，在保证用户体验不变的同时避免资源浪费。

(2)在做响应式网页时，如果我们不做优化处理所有的屏幕都用 800*800px的图片，很明显就会导致图片资源的浪费。

(3)在Http1.x协议下运行web应用，因为浏览器的限制同一个域名下的资源同时并发加载被限制在3-6个，也就意味着如果我们只用1个域名加载图片时，不管我们网上有多快，我们同一时刻也只能最多加载6个张图，这个时候我们通常是应用多个域名以保证图片并发加载，但是因此带来的问题就是：同样的图片第一次加载是用http://s1.test.com域名加载的，用户在刷新一次就可能变成http://s2.test.com域名加载，这样就会出现同一个图片有可能被2个域名加载的问题，从缓存上来讲第二次的加载就是资源浪费，因为假如我们每次都是从一个固定的域名取片，而且这图片有加了缓存，客户第二次刷新就是直接从缓存取图片，有效的避免了一次资源浪费。

(4)现在有些系统也会做图片自适应方案，大概思路在<img>标签上面加上不同图片的属性，<img src＝”http://s1.test.com/b.gif”data-x2-src＝” http://s1.test.com/logo@1x.png”data-x2-src＝” http://s1.test.com/logo@2x.png”data-x3-src＝” http://s1.test.com/logo@3x.png”>,然后通过js判断当前屏幕尺寸来加载不同的图片尺。

发明内容

本发明的目的是解决现有技术中上述不足之处，提供一种结合图片裁剪技术和缓存技术，可以轻松的实现图片按需加载服务，避免资源浪费和性能损失，从而提高用户访问网站的用户体验的智能图片懒加载方法。

本发明公开一种智能图片懒加载方法，包括以下步骤：

设置服务端支持按照参数裁图；

根据获取参数判断用户是否需要进行图片资源优化加载。

作为优选，根据获取参数判断用户是否需要进行图片资源优化加载的步骤，进一步包括：

步骤a，扫描所有需要进行资源优化的资源标签，如果是类div标签，后面就会直接把按需加载过来的图片应用到内联样式；如果是img标签，就会直接把按需加载过来的图片应用到img标签的src属性上；

步骤b，初始化默认配置，伪代码如下：