带有webp回退和数据src的背景图像

因此,我正在我的网站上做一些优化工作,以提高页面洞察力得分,我可以解决的两点是:

• 以下一代格式提供图像
• 延缓屏幕图像

因此,下一代格式的图像,我决定使用webp,但需要包括回退,以便它们在所有浏览器/设备中工作。

延迟屏幕外图像;我正在使用 data-src 使用一点js脚本将背景图像设置为数据src,js将替换初始src src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="

以下面的例子为例,我将如何在WebP中使用内联背景图像和回退,同时延迟屏幕外图像?

HTML

<div id="working-bg" class="parallax" data-src="/wp-content/uploads/2016/08/silva-planning-parralax.jpg" style="background-image: url(/wp-content/uploads/2016/08/silva-planning-parralax.jpg)"></div>

数据src的js

<script>
function init() {
    var imgDefer = document.getElementsByTagName('img');
    for (var i=0; i<imgDefer.length; i++) {
    if(imgDefer[i].getAttribute('data-src')) {
        imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
    } }

    var imgDeferSpan = document.querySelectorAll('span[data-src]');
    var styleSpan = "background-image: url({url})";
    for (var i = 0; i < imgDeferSpan.length; i++) {
        imgDeferSpan[i].setAttribute('style', styleSpan.replace("{url}", imgDeferSpan[i].getAttribute('data-src')));
    }

    var imgDeferDiv = document.querySelectorAll('div[data-src]');
    var styleDiv = "background-image: url({url})";
    for (var i = 0; i < imgDeferDiv.length; i++) {
        imgDeferDiv[i].setAttribute('style', styleDiv.replace("{url}", imgDeferDiv[i].getAttribute('data-src')));
    }

}

window.onload = init;

</script>

提前谢谢!