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

权利要求书

1.一种智能图片懒加载方法，其特征在于，包括以下步骤：

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

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

2.根据权利要求1所述的智能图片懒加载方法，其特征在于，根据获取参数判断用户是否需要进行图片资源优化加载的步骤，进一步包括：

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

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

var LazyLoad＝require(‘lazyload’)；

var lazyload＝new LazyLoad(‘.jImg’,{domain:[‘s1.test.com’,’s2.test.com’],w:100})；

lazyload.load()；

lazyload.on(‘loading’,function(currentEle,context){})

lazyload.on(‘loaded’,function(currentEle,context){})

lazyload.on(‘error,function(currentEle,context){})

步骤c，如果用户指定的图片到了可视区域就会先匹配是否有特定参数，所述特定参数是指在类div标签或者img标签的配置参数data-img-config的值，如果有就用标签配置参数覆盖全局配置参数；

步骤d，在得到这个图片最终要执行的参数信息后，就会按此规则在客户端生成新的图片地址，然后浏览器就向图片服务发送请求；

步骤e，图片服务器接收到请求以后就会判断图片是否存在，如果存就直接返回，如果不存在就根据参数裁剪需要的图片；

步骤f，客户端收到服务器端响应回调后就可以判断图片是否加载成功，如果成功就往标签中更新图片路径；如果加载失败就做一个失败标识，所有需要支持智能图片加载的标签都会有三种状态loading：加载中，loaded：加载成功，error：加载失败，这三个状态对应了3个事件，开发者可以很方便的利用这个些事件定制需求。

3.根据权利要求1所述的智能图片懒加载方法，其特征在于，所述步骤d中，图片生成规则如下：

步骤Ⅰ，先判断图片ID(data-img-src的值)是否符合之前定义的格式，如果符合就正则匹配出图片ID(imgID，32位HASH)和图片原始尺寸(widthxheight),size＝{w:width,h:height}。如果配合合法就继续走下面流程，如果不匹配就判断是否是一个合法的url请求，如果是合法的url请求就直接强制替换图片标签的图片(类div标签是<div style＝”background-image:url(imgPath)”…></div>，img标签是<img src＝”imgPath”…>)，如果不符合就跳过，并触发error事件；

步骤Ⅱ，得到图片HASH，然后用算法分配对应的域名，算法的核心就是获取HASH里面第一个数子(如果没有任何数字，默认是0)，然后用第一个数字跟1和2分别求余数，如果余数是1的图片，就用s1.tuya.com，如果余数是2的图片就用s2.tuya.com；

步骤Ⅲ，读取当前用户客户端信息，并把window.innerWidth、window.innerHeight和document.devicePixelRatio缓存起来，然后监听window.onresize，如果监听有变化就更新这3个变量；

步骤Ⅳ，分析传入参数，对比window.innerWidth与lgw，xsw和w的关系，缓存图片宽度；

步骤Ⅴ，对比缓存的图片宽度是否在之前缓存的原始图片宽度内，如果width>＝size.w就直接返回原始图，如果width<size.w就拼接文件后缀为：？w＝width；

步骤Ⅵ，按照【域名+图片ID+文件后缀】组合一个完全满足需求的图片地址，基于图片地址向服务器端发起请求。