3

因此，我正在我的网站上进行一些优化工作以提高 Page Insights 分数，我可以解决的两点是：-

  • 以下一代格式提供图像
  • 延迟离屏图像

所以下一代格式的图像，我决定使用 WebP，但需要包含后备，以便它们在所有浏览器/设备中工作。

推迟屏幕外图像；我正在使用data-src一些 JS 脚本将背景图像设置为 data-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>

用于数据源的 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>

提前致谢！

4

4 回答 4

4

以下一代格式提供图像：使用 imagekit.io 之类的图像 CDN 并自动为您完成。大多数图像 CDN 都有一个免费计划，非常适合测试和小型站点。

推迟屏幕外图像：使用像 lozad.js 这样的现成的解决方案来处理图像和背景图像。对于背景图像，您可以跳过设置初始内联样式，因为元素已设置其大小，并且在图像加载时不会导致任何重排。对于<img>s 使用空<svg>作为初始src值，其中6 9在viewBox下面定义宽度 (6) 和高度 (9) 之间的关系 => 更改这些值以适合您的上下文。

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3C/svg%3E

请注意，lozad.js 使用仍然缺乏浏览器支持的 Intersection Observer API，因此请务必添加一个 polyfill。

祝你好运！

于 2019-02-28T10:45:45.567 回答
3

我刚刚想出了一个可能有效的解决方案标签已经完成了工作，所以我们只需要一点 js。只需将标签放在您想要背景图像的对象内display: none;并做魔术：

<div id="bghere" style="height: 400px; width: 400px;">
    <h1>Some content</h1>
    <picture style="display:none;">
        <source srcset="picture.webp"/>
        <img src="picture.jpg"/>
    </picture>
</div>
<script>
function init(){
    var bghere = document.getElementById('bghere');
    bghere.style.backgroundImage = "url("+bghere.getElementsByTagName('picture')[0].getElementsByTagName('img')[0].currentSrc.toString()+")";
}
</script>
于 2019-12-08T16:27:08.063 回答
1

以下一代格式提供图像：

将 *.jpeg 或 *.png 图像转换为 *.jpeg.webp 或 *.png.webp 并配置服务器以有条件地交付 webp。

<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule>
<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_URI} (?i)(.*)\.(jpe?g|png)$
    RewriteCond %{DOCUMENT_ROOT}%1\.%2.webp -f
    RewriteRule (?i)(.*)\.(jpe?g|png)$ %1\.%2\.webp [T=image/webp,E=webp:1,L]
    <IfModule mod_headers.c>
        Header append Vary Accept env=REDIRECT_webp
    </IfModule>
</IfModule>

延迟离屏图像：

为元素添加 loading=lazy 属性<img>。

于 2021-07-25T14:34:34.100 回答
0

这是我的解决方案。这与 Tamás 的回答有点不同。使用可选类包含您可以设置图像的大小。onload 事件确保最终图像的能力。您使用隐藏的图片元素加载图像并使用 js 获取加载的图像（回退到 jpg 或 png）。最后，将加载的图像设置为 jquery 作为父 div 的背景。也许该领域有更好的解决方案，但这对我有用。

function makeBgImage( img ){
    let srcImage;
    if ( typeof img.currentSrc === "undefined" ){
        //Old browser
        srcImage = img.src;
    }else{
        //Modern browser
        srcImage = img.currentSrc;
    }
    let ref = $(img).parents('div:first');
    ref.css('background', 'url(' + srcImage + ')');
    if( ref.hasClass('contain') ){
        ref.css('background-size', 'contain');
    }else{
        ref.css('background-size', 'cover');
    }
    ref.css('background-position', 'center');
    ref.css('background-repeat', 'no-repeat');
}
.hidden{display: none;}
.img-container{
  width: 100%;
  padding-top: 62.5%; /* 8:5 Aspect Ratio */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-container">
  <picture class="hidden">
    <source srcset="image.webp" type="image/webp">
    <img onload="makeBgImage(this)" alt="Image" src="image.png">
  </picture>
</div>

于 2022-03-02T11:25:17.427 回答