Posted at

webpの読み込み判定 nuxt vue-lazyload

webpを読み込むために

あなたのnuxt.config.jsに追記します1


nuxt.config.js

build: {

extend(config, {
isClient
}) {
config
.module
.rules
.push({
test: /\.(webp)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]'
]
})
}
},

ENDwebpを読み込むためにEND


webpを作ります 2<-URLリンク3<-スクショ

webpを/staticに配置します4<-URLリンク5<-スクショ

webpをimportします

import imgwebp from '../static/images/lp/elem/abtest/image.webp'

import imgpng from '../static/images/lp/elem/abtest/image.png'

dataでreturnします

data () { 

return {
imgwebp: imgwebp,
imgpng: imgpng
}
}

methodにwebpを使えるか判定するメソッドを追記します 6


async canUseWebP () {
if (process.browser) {// because require window variable
var elem = await window.document.createElement('canvas')
if (elem.getContext && (await elem.getContext('2d'))) {
// was able or not to get WebP representation
return (
(await elem.toDataURL('image/webp').indexOf('data:image/webp')) ===
0
)
}
// very old browser like IE 8, canvas not supported
return false
}
}

使いたいところに記載します


<img
:src="this.canUseWebP() ? imgwebp : imgpng"
/>

webp+lazyload

https://unpkg.com/vue-lazyload/vue-lazyload.js

cdnを使ってwebp+lazyloadを実現できます(多分nodemoduleでもできる)

headerのscriptに追記します7<-リンク8<-スクショ

{

src: "/js/vue-lazyload.js"
}

先ほどの記述を変更します


<img
v-lazy="this.canUseWebP() ? imgwebp : imgpng" // :srcv-lazyに変更
/>


https://qiita.com/itosho/items/50636b1b3ff7e83dc0f2