supportWebp() will append a '!'

[BoltDoggy]

function supportWebp () {
    if (!inBrowser) return false

    let support = true
    const d = document

    try {
        let el = d.createElement('object')
        el.type = 'image/webp'
        el.innerHTML = '!'
        d.body.appendChild(el)
        support = !el.offsetWidth
        d.body.removeChild(el)
    } catch (err) {
        support = false
    }

    return support
}

在没有使用 vue-ssr 的情况下，页面由 vue 进行前端渲染，会导致一开始白屏的时候，出现一个 ‘!’ 一闪而过

[LingF]

也遇到了这个情况！

[hilongjw]

这样应该可以解决这个问题，稍后修复这里

function supportWebp () {
    if (!inBrowser) return false

    let support = true
    const d = document

    try {
        let el = d.createElement('object')
        el.style.display = 'none'
        el.type = 'image/webp'
        el.innerHTML = '!'
        d.body.appendChild(el)
        support = !el.offsetWidth
        d.body.removeChild(el)
    } catch (err) {
        support = false
    }

    return support
}

[BoltDoggy]

display: none 会使 offsetWidth 值 为 0, support 的值就不准确了，可以使用 visibility: hidden;

[hilongjw]

@lc60005457 感谢，稍后会在新版本修复这里

[LingF]

现在暂时样式里面匹配了这个元素
object[type="image/webp"] { visibility: hidden; }

[hilongjw]

@LingF 在新版中增加了对这个webp支持检测元素的隐藏，可以不用通过增加css 解决了。https://github.com/hilongjw/vue-lazyload/blob/master/src/util.js#L111

[LingF]

@hilongjw nice