bug fix: 修改lazy为defer，避免和其他lazy库混淆

README.md

@@ -31,7 +31,7 @@ Vue.use(VueImg, {
 <!-- 设置图片 + 默认参数 -->
 <img v-img="'xxx'">
 <!-- 设置图片 + 自定义参数 -->
-<img v-img="{ hash: 'xxx', width: 233, height: 666, lazy: true, adapt: false }">
+<img v-img="{ hash: 'xxx', width: 233, height: 666, defer: true, adapt: false }">
 
 <!-- 设置背景 + 默认参数 -->
 <div v-img="'xxx'"></div>
@@ -65,11 +65,11 @@ VueImg.getSrc({ ... }) // [Function] 获取图片地址
 | error    | [String] 失败替换图片哈希         |  〇   |  〇   |     ✕     |
 | adapt    | [Boolean] 图片尺寸是否适配设备屏幕    |  〇   |  〇   |     〇     |
 | delay    | [Number] 设置延迟加载最大等待时长（ms） |  〇   |  ✕   |     ✕     |
-| lazy     | [Boolean] 图片是否进行延迟加载      |  ✕   |  〇   |     ✕     |
+| defer     | [Boolean] 图片是否进行延迟加载      |  ✕   |  〇   |     ✕     |
 
 - `suffix` 参数可用于模糊、旋转等特殊处理，具体请参考[《七牛 CDN 开发者文档》](http://developer.qiniu.com/code/v6/api/kodo-api/image/imagemogr2.html)。
 - `adapt`图片尺寸是否适配设备屏幕大小，指令参数会覆盖全局配置，例如：当全局配置`adapt: true`时，指令参数`adpat: false`，那么该图片不会根据设备viewport调整尺寸。
-- `lazy`延迟加载的含义，当`lazy: false`时，图片在`v-img`指令的`bind`钩子函数中加载，当`lazy: true`时，又分两种情况，图片在首屏和不在首屏中。在首屏中的图片会在`v-img`指令的`inseated`钩子函数中加载，非首屏的图片将等待`lazy: false`和首屏中图片都加载完全后才加载。
+- `defer`延迟加载的含义，当`defer: false`时，图片在`v-img`指令的`bind`钩子函数中加载，当`defer: true`时，又分两种情况，图片在首屏和不在首屏中。在首屏中的图片会在`v-img`指令的`inserted`钩子函数中加载，非首屏的图片将等待`defer: false`和首屏中图片都加载完全后才加载。
 - `delay`延迟加载最大等待时长，默认值**5000ms**。
 
 ## 贡献代码

build/mockIphone5.js

@@ -1,2 +1,3 @@
-document.documentElement.setAttribute('style', 'font-size: 64px')
-document.documentElement.setAttribute('data-dpr', '2')
+const html = document.documentElement
+html.setAttribute('style', 'font-size: 64px')
+html.setAttribute('data-dpr', '2')

build/test/delay.test.js

@@ -3,9 +3,9 @@ describe('延迟加载', function() {
 
   const hash = '50f940dbce46148638e03d0778a4c5f8jpeg'
   const loading = '7b73ae0bcb1e68afacbaff7d4b25780bjpeg'
-  const error = '4f88f93f3797600783990d32e5673ab7jpeg'
+
   const config1 = {hash: ''}
-  const config2 = {hash, lazy: true}
+  const config2 = {hash, defer: true}
 
   const getImgs = (n) => {
     let str = ''
@@ -27,13 +27,13 @@ describe('延迟加载', function() {
       loading,
       delay
     })
-    const vm = new Vue({ el: `#${id}`, data: {config1, config2} })
+    new Vue({ el: `#${id}`, data: {config1, config2} })
   }
 
 
   describe('{ 延迟加载图片在（非延迟加载图片没有加载完 && 5000ms内）不进行加载 }', () => {
 
-    const id = 'vm-' + (+new Date).toString(32)
+    const id = `vm-${(+new Date).toString(32)}`
 
     before(done => {
       setViewModel(id, 5000, 100)
@@ -51,7 +51,7 @@ describe('延迟加载', function() {
 
   describe('{ 延迟加载图片在（非延迟加载图片没有加载完 && 等待100ms后）进行加载 }', () => {
 
-    const id = 'vm-' + (+new Date).toString(32)
+    const id = `vm-${(+new Date).toString(32)}`
 
     before(done => {
       setViewModel(id, 100, 100)
@@ -69,7 +69,7 @@ describe('延迟加载', function() {
 
   describe('{ 延迟加载图片在（非延迟加载图片加载完后 && 5000ms内）进行加载 }', () => {
 
-    const id = 'vm-' + (+new Date).toString(32)
+    const id = `vm-${(+new Date).toString(32)}`
 
     before(done => {
       setViewModel(id, 5000, 1)

dist/vue-img.es6.js

@@ -12,6 +12,7 @@ const env = document.domain.match(/.(alpha|beta).ele(net)?.me$/);
 VueImg$1.cdn = protocol + (env ? `fuss${env[0]}` : 'fuss10.elemecdn.com');
 
 const hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+const html = document.documentElement;
 
 const copyKeys = ({ source, target, keys }) => {
   keys.forEach(key => {
@@ -30,16 +31,20 @@ const setAttr = (el, src, tag) => {
 };
 
 const resize = (size) => {
-  const html = document.documentElement;
-  const hasDPR = html.hasAttribute('data-dpr');
   let viewWidth;
   try {
     viewWidth = +(html.getAttribute('style').match(/(\d+)/) || [])[1];
   } catch(e) {
-    console.error('adapt参数需要配合lib-flexible库使用：https://github.com/amfe/lib-flexible');
+    const dpr = window.devicePixelRatio;
+    const w = html.offsetWidth;
+    if (w / dpr > 540) {
+      viewWidth = 540 * dpr / 10;
+    } else {
+      viewWidth = w / 10;
+    }
   }
 
-  if (hasDPR && !Number.isNaN(viewWidth) && typeof viewWidth === 'number') {
+  if (Number(viewWidth) >= 0 && typeof viewWidth === 'number') {
     return (size * viewWidth) / 75 // 75 is the 1/10 iphone6 deivce width pixel
   } else {
     return size
@@ -150,7 +155,7 @@ var getImageClass = (opt = {}) => {
           'hash', 'loading', 'error',
           'width', 'height', 'quality',
           'format', 'fallback', 'adapt',
-          'prefix', 'suffix', 'lazy',
+          'prefix', 'suffix', 'defer',
         ],
       });
     }
@@ -181,7 +186,7 @@ const install = (Vue, opt) => {
     const vImgSrc = vImgIns.toImageSrc();
     const vImgErr = vImgIns.toErrorSrc();
 
-    if (!vImgSrc) return
+    if (!vImgSrc) return Promise.resolve()
 
     const img = new Image();
     const delay = +vImgIns.delay || 5000;
@@ -208,16 +213,16 @@ const install = (Vue, opt) => {
   Vue.directive('img', {
     bind(el, binding, vnode) {
       const loadSrc = new vImg(binding.value).toLoadingSrc();
-      const { lazy } = binding.value;
+      const { defer } = binding.value;
 
       if (loadSrc) setAttr(el, loadSrc, vnode.tag);
-      if (!lazy) {
+      if (!defer) {
         promises.push(update(el, binding, vnode));
       }
     },
     inserted(el, binding, vnode) {
-      const { lazy } = binding.value;
-      if (!lazy) return
+      const { defer } = binding.value;
+      if (!defer) return
       if (inViewport(el)) {
 
         promises.push(update(el, binding, vnode));

dist/vue-img.js

@@ -18,6 +18,7 @@ var env = document.domain.match(/.(alpha|beta).ele(net)?.me$/);
 VueImg$1.cdn = protocol + (env ? ("fuss" + (env[0])) : 'fuss10.elemecdn.com');
 
 var hasProp = function (obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); };
+var html = document.documentElement;
 
 var copyKeys = function (ref) {
   var source = ref.source;
@@ -40,16 +41,20 @@ var setAttr = function (el, src, tag) {
 };
 
 var resize = function (size) {
-  var html = document.documentElement;
-  var hasDPR = html.hasAttribute('data-dpr');
   var viewWidth;
   try {
     viewWidth = +(html.getAttribute('style').match(/(\d+)/) || [])[1];
   } catch(e) {
-    console.error('adapt参数需要配合lib-flexible库使用：https://github.com/amfe/lib-flexible');
+    var dpr = window.devicePixelRatio;
+    var w = html.offsetWidth;
+    if (w / dpr > 540) {
+      viewWidth = 540 * dpr / 10;
+    } else {
+      viewWidth = w / 10;
+    }
   }
 
-  if (hasDPR && !Number.isNaN(viewWidth) && typeof viewWidth === 'number') {
+  if (Number(viewWidth) >= 0 && typeof viewWidth === 'number') {
     return (size * viewWidth) / 75 // 75 is the 1/10 iphone6 deivce width pixel
   } else {
     return size
@@ -171,7 +176,7 @@ var getImageClass = function (opt) {
           'hash', 'loading', 'error',
           'width', 'height', 'quality',
           'format', 'fallback', 'adapt',
-          'prefix', 'suffix', 'lazy' ],
+          'prefix', 'suffix', 'defer' ],
       });
     }
 
@@ -207,7 +212,7 @@ var install = function (Vue, opt) {
     var vImgSrc = vImgIns.toImageSrc();
     var vImgErr = vImgIns.toErrorSrc();
 
-    if (!vImgSrc) { return }
+    if (!vImgSrc) { return Promise.resolve() }
 
     var img = new Image();
     var delay = +vImgIns.delay || 5000;
@@ -235,17 +240,17 @@ var install = function (Vue, opt) {
     bind: function bind(el, binding, vnode) {
       var loadSrc = new vImg(binding.value).toLoadingSrc();
       var ref = binding.value;
-      var lazy = ref.lazy;
+      var defer = ref.defer;
 
       if (loadSrc) { setAttr(el, loadSrc, vnode.tag); }
-      if (!lazy) {
+      if (!defer) {
         promises.push(update(el, binding, vnode));
       }
     },
     inserted: function inserted(el, binding, vnode) {
       var ref = binding.value;
-      var lazy = ref.lazy;
-      if (!lazy) { return }
+      var defer = ref.defer;
+      if (!defer) { return }
       if (inViewport(el)) {
 
         promises.push(update(el, binding, vnode));

src/class.js

@@ -47,7 +47,7 @@ export default (opt = {}) => {
           'hash', 'loading', 'error',
           'width', 'height', 'quality',
           'format', 'fallback', 'adapt',
-          'prefix', 'suffix', 'lazy',
+          'prefix', 'suffix', 'defer',
         ],
       })
     }

src/directive.js

@@ -11,7 +11,7 @@ const install = (Vue, opt) => {
     const vImgSrc = vImgIns.toImageSrc()
     const vImgErr = vImgIns.toErrorSrc()
 
-    if (!vImgSrc) return
+    if (!vImgSrc) return Promise.resolve()
 
     const img = new Image()
     const delay = +vImgIns.delay || 5000
@@ -38,16 +38,16 @@ const install = (Vue, opt) => {
   Vue.directive('img', {
     bind(el, binding, vnode) {
       const loadSrc = new vImg(binding.value).toLoadingSrc()
-      const { lazy } = binding.value
+      const { defer } = binding.value
 
       if (loadSrc) setAttr(el, loadSrc, vnode.tag)
-      if (!lazy) {
+      if (!defer) {
         promises.push(update(el, binding, vnode))
       }
     },
     inserted(el, binding, vnode) {
-      const { lazy } = binding.value
-      if (!lazy) return
+      const { defer } = binding.value
+      if (!defer) return
       if (inViewport(el)) {
 
         promises.push(update(el, binding, vnode))

src/utils.js

@@ -1,6 +1,5 @@
 const hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)
 const html = document.documentElement
-const hasDPR = html.hasAttribute('data-dpr')
 
 export const copyKeys = ({ source, target, keys }) => {
   keys.forEach(key => {
@@ -23,10 +22,16 @@ export const resize = (size) => {
   try {
     viewWidth = +(html.getAttribute('style').match(/(\d+)/) || [])[1]
   } catch(e) {
-    console.error('adapt参数需要配合lib-flexible库使用：https://github.com/amfe/lib-flexible')
+    const dpr = window.devicePixelRatio
+    const w = html.offsetWidth
+    if (w / dpr > 540) {
+      viewWidth = 540 * dpr / 10
+    } else {
+      viewWidth = w / 10
+    }
   }
 
-  if (hasDPR && !Number.isNaN(viewWidth) && typeof viewWidth === 'number') {
+  if (Number(viewWidth) >= 0 && typeof viewWidth === 'number') {
     return (size * viewWidth) / 75 // 75 is the 1/10 iphone6 deivce width pixel
   } else {
     return size