From be7d28edfc587df0c43c4c1de9f51114a12b720f Mon Sep 17 00:00:00 2001 From: levy <897895407@qq.com> Date: Tue, 29 Dec 2020 17:47:42 +0800 Subject: [PATCH 1/7] docs: comment --- src/directive.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/directive.js b/src/directive.js index 625bf44..e8cf305 100644 --- a/src/directive.js +++ b/src/directive.js @@ -2,7 +2,7 @@ import getImageSrc from './provider-config' import ua from './ua' function getSrc(config) { - // TODO 暂时只用简单的同步方式检测 + // TODO only simply check in sync way const isSupportWebp = ua.isSupportWebp(navigator.userAgent) || JSON.parse(localStorage.getItem('isSupportWebp')) || From fcb1debcc37f6cbab417590eff9fac212e14fbd6 Mon Sep 17 00:00:00 2001 From: levy <897895407@qq.com> Date: Wed, 30 Dec 2020 14:53:12 +0800 Subject: [PATCH 2/7] =?UTF-8?q?fix:=20=E5=8A=A0=E8=BD=BD=E9=A1=BA=E5=BA=8F?= =?UTF-8?q?=EF=BC=8C=E8=A7=A3=E5=86=B3=E4=B8=8D=E7=BC=93=E5=AD=98=E6=83=85?= =?UTF-8?q?=E5=86=B5=E4=B8=8B=EF=BC=8CChrome=20=E5=81=B6=E5=B0=94=E6=97=A0?= =?UTF-8?q?=E6=B3=95=E6=98=BE=E7=A4=BA=20background-img=20=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 4 ++-- src/load-script.js | 26 ++++++++++++++++++++++++++ src/loadScript.js | 24 ------------------------ 3 files changed, 28 insertions(+), 26 deletions(-) create mode 100644 src/load-script.js delete mode 100644 src/loadScript.js diff --git a/src/index.js b/src/index.js index 224e643..67f05e5 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,7 @@ import Component from './v-img.vue' import background from './directive' import placeholder from './spinner.svg' -import loadScript from './loadScript.js' +import loadScript from './load-script.js' const defaultOptions = { placeholder, @@ -22,7 +22,7 @@ Component.install = (Vue, options = {}) => { Vue.prototype.$vImg = {...defaultOptions, ...options} if (typeof window !== 'undefined' && !window.lazySizes) { - Promise.all([loadScript(lazysizes), loadScript(bgset)]).catch(console.error) + Promise.all([loadScript(bgset), loadScript(lazysizes)]).catch(console.error) } Vue.component(Component.name, Component) diff --git a/src/load-script.js b/src/load-script.js new file mode 100644 index 0000000..c8fe85f --- /dev/null +++ b/src/load-script.js @@ -0,0 +1,26 @@ +const loaded = new Set() + +export default function(url) { + return new Promise((resolve, reject) => { + if (!url) { + reject(new Error('Script is not found')) + } + if (loaded.has(url)) { + resolve(true) + } else { + const node = document.getElementsByTagName('script')[0], + script = document.createElement('script') + script.src = url + + script.onload = function() { + loaded.add(url) + resolve(true) + } + script.onerror = function(err) { + script.remove() + reject(err) + } + node.parentNode.insertBefore(script, node) + } + }) +} diff --git a/src/loadScript.js b/src/loadScript.js deleted file mode 100644 index b28bc26..0000000 --- a/src/loadScript.js +++ /dev/null @@ -1,24 +0,0 @@ -const loaded = new Set() - -export default function(script) { - return new Promise((resolve, reject) => { - if (!script) { - reject(new Error('Script is not found')) - } - if (loaded.has(script)) { - resolve(true) - } else { - const loadScript = document.createElement('script') - loadScript.onload = function() { - loaded.add(script) - resolve(true) - } - loadScript.onerror = function(err) { - loadScript.remove() - reject(err) - } - loadScript.src = script - document.body.appendChild(loadScript) - } - }) -} From 03d1c44ef1a9ff2db7d0991550674365a7e0b460 Mon Sep 17 00:00:00 2001 From: levy <897895407@qq.com> Date: Wed, 30 Dec 2020 15:08:53 +0800 Subject: [PATCH 3/7] =?UTF-8?q?fix(load-script):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E9=80=BB=E8=BE=91=EF=BC=8C=E8=A7=A3=E5=86=B3?= =?UTF-8?q?=E4=B8=8D=E7=BC=93=E5=AD=98=E6=83=85=E5=86=B5=E4=B8=8B=EF=BC=8C?= =?UTF-8?q?Chrome=20=E5=81=B6=E5=B0=94=E6=97=A0=E6=B3=95=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=20background-img=20=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 5 ++++- src/load-script.js | 12 +++++------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/index.js b/src/index.js index 67f05e5..78794b1 100644 --- a/src/index.js +++ b/src/index.js @@ -22,7 +22,10 @@ Component.install = (Vue, options = {}) => { Vue.prototype.$vImg = {...defaultOptions, ...options} if (typeof window !== 'undefined' && !window.lazySizes) { - Promise.all([loadScript(bgset), loadScript(lazysizes)]).catch(console.error) + Promise.all([ + loadScript({name: 'bgset', url: bgset}), + loadScript({name: 'lazysizes', url: lazysizes}) + ]).catch(console.error) } Vue.component(Component.name, Component) diff --git a/src/load-script.js b/src/load-script.js index c8fe85f..41cad4c 100644 --- a/src/load-script.js +++ b/src/load-script.js @@ -1,19 +1,17 @@ -const loaded = new Set() - -export default function(url) { +export default function({name, url}) { return new Promise((resolve, reject) => { if (!url) { - reject(new Error('Script is not found')) + reject(new Error('to load script, url cannot be null')) } - if (loaded.has(url)) { + if (document.getElementById(name)) { resolve(true) } else { const node = document.getElementsByTagName('script')[0], script = document.createElement('script') - script.src = url + script.setAttribute('id', name) + script.setAttribute('src', url) script.onload = function() { - loaded.add(url) resolve(true) } script.onerror = function(err) { From 28aa16e0b51e2882a2c2b6cc180f83af6e2a0e90 Mon Sep 17 00:00:00 2001 From: levy <897895407@qq.com> Date: Wed, 30 Dec 2020 15:15:24 +0800 Subject: [PATCH 4/7] chore: tweak --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 78794b1..882c29d 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,7 @@ import Component from './v-img.vue' import background from './directive' import placeholder from './spinner.svg' -import loadScript from './load-script.js' +import loadScript from './load-script' const defaultOptions = { placeholder, From b99ec7186a87dd31f889a2327939e9b8ed30125a Mon Sep 17 00:00:00 2001 From: levy <897895407@qq.com> Date: Wed, 30 Dec 2020 15:16:55 +0800 Subject: [PATCH 5/7] docs: add bgset dcos --- src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.js b/src/index.js index 882c29d..ee1e688 100644 --- a/src/index.js +++ b/src/index.js @@ -22,6 +22,7 @@ Component.install = (Vue, options = {}) => { Vue.prototype.$vImg = {...defaultOptions, ...options} if (typeof window !== 'undefined' && !window.lazySizes) { + // https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/bgset Promise.all([ loadScript({name: 'bgset', url: bgset}), loadScript({name: 'lazysizes', url: lazysizes}) From 3db32f5340afbe7f45f3734d239ad643536c947f Mon Sep 17 00:00:00 2001 From: levy <897895407@qq.com> Date: Wed, 30 Dec 2020 15:27:30 +0800 Subject: [PATCH 6/7] chore: script tag order the same as load script order --- src/load-script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/load-script.js b/src/load-script.js index 41cad4c..94226c7 100644 --- a/src/load-script.js +++ b/src/load-script.js @@ -18,7 +18,7 @@ export default function({name, url}) { script.remove() reject(err) } - node.parentNode.insertBefore(script, node) + node.parentNode.insertBefore(script, null) } }) } From cfc18f2bcf788b9f4b7b263b161ca80acf649626 Mon Sep 17 00:00:00 2001 From: levy <897895407@qq.com> Date: Wed, 30 Dec 2020 18:19:46 +0800 Subject: [PATCH 7/7] fix: request repeat on disable cache --- docs/customize.md | 4 ++-- src/v-img.vue | 32 +++++++++++++++++++++++++------- 2 files changed, 27 insertions(+), 9 deletions(-) diff --git a/docs/customize.md b/docs/customize.md index d4c62f5..dfd2e74 100644 --- a/docs/customize.md +++ b/docs/customize.md @@ -15,7 +15,7 @@ Vue.ues(VImg, { 自定义图案的使用逻辑： 组件属性设置 > 全局设置 > 默认设置 ### 修改占位图的大小 -load 时可以用类名 `.on-loading`, error 时可以用类名 `.on-error` 覆盖默认的样式 +load 时可以用类名 `.lazyloading`, error 时可以用类名 `.lazyload-error` 覆盖默认的样式 ```vue diff --git a/src/v-img.vue b/src/v-img.vue index 407d18a..c85b78b 100644 --- a/src/v-img.vue +++ b/src/v-img.vue @@ -1,9 +1,10 @@