diff --git a/README.md b/README.md index ae64220..82aa173 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ Vue.use(VueImg, { - +
@@ -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**。 ## 贡献代码 diff --git a/build/mockIphone5.js b/build/mockIphone5.js index 12db959..1fb0995 100644 --- a/build/mockIphone5.js +++ b/build/mockIphone5.js @@ -1,2 +1,3 @@ -document.documentElement.setAttribute('style', 'font-size: 64px') -document.documentElement.setAttribute('data-dpr', '2') \ No newline at end of file +const html = document.documentElement +html.setAttribute('style', 'font-size: 64px') +html.setAttribute('data-dpr', '2') diff --git a/build/test/delay.test.js b/build/test/delay.test.js index bccab9e..840094e 100644 --- a/build/test/delay.test.js +++ b/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) diff --git a/dist/vue-img.es6.js b/dist/vue-img.es6.js index 705b579..834f48a 100644 --- a/dist/vue-img.es6.js +++ b/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)); diff --git a/dist/vue-img.js b/dist/vue-img.js index 47a2b24..1762d70 100644 --- a/dist/vue-img.js +++ b/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)); diff --git a/src/class.js b/src/class.js index 188bd83..3f8e5ff 100644 --- a/src/class.js +++ b/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', ], }) } diff --git a/src/directive.js b/src/directive.js index 5960603..296bf14 100644 --- a/src/directive.js +++ b/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)) diff --git a/src/utils.js b/src/utils.js index f0fd45d..771ea41 100644 --- a/src/utils.js +++ b/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