如何解决在Firefox中加载后备背景图片
我一直在改善我的网站页面速度。我计划使用AVIF格式的图像。仅最新的Chrome浏览器版本支持此图像格式。 为了提供备用图片,我使用了以下CSS:
.banner-bg {
background-image: url('https://cdn.xyz.com/content/images/desktop_banner_bg.jpg'),linear-gradient(90deg,rgb(246,250,255) 0%,rgb(244,249,255) 33%,rgb(213,227,255) 70%,rgb(211,225,255) 100%);
}
.banner-bg{
background: url('https://cdn.xyz.com/content/images/desktop_banner_bg-updated.avif'),255) 100%);
}
这在Chrome中工作正常,在Chrome中,仅会加载AVIF bg图像,而jpg格式会被忽略。在旧版的Chrome中,AVIF格式将被忽略,而jpg格式将被加载。
页面中仅加载一张图像。在Firefox和其他浏览器中,AVIF格式将被忽略,而jpg将不会加载。我尝试使用下面的代码有效,但是两个格式的图像均已加载到页面中,这增加了页面大小。
.banner-bg {
background-image: url('https://cdn.xyz.com/content/images/desktop_banner_bg.jpg'),url('https://cdn.xyz.com/content/images/desktop_banner_bg-updated.avif'),255) 100%);
}
有没有办法在Firefox中提供仅提供默认背景图片时才加载的后备背景图片?
解决方法
嗨,在您要使用bg + fallbackbg的css元素中使用此代码:
bg {
background-image: url(/images/top-landing-home-cropped.jpg);
background-image: -webkit-image-set(url(/images/top-landing-home-cropped.webp)1x );
}
如果无用,浏览器将尝试加载WEBP。否则会有错误代码将加载JPG。
对于<img>
元素,您可以使用此“黑客”工具,该工具已在2020年10月14日之前在所有常见浏览器上的网站上进行了100%测试:
<img alt="" src="/images/xx.webp" onerror="this.onerror=null; this.src='/images/xx.png'">
任何问题请发表评论,谢谢
,通常,后备广告的工作方式如下:
<picture>
<source srcset="img/Image.avif" type="image/avif">
<img src="img/image.jpg" alt="Alt Text!" type="image/jpg">
</picture>
但是,如果您想使用background-image
进行操作,则可以尝试将@supports
组合使用
.banner-bg{
background: url('https://cdn.xyz.com/content/images/desktop_banner_bg-updated.jpg'),linear-gradient(90deg,rgb(246,250,255) 0%,rgb(244,249,255) 33%,rgb(213,227,255) 70%,rgb(211,225,255) 100%);
@supports(content-visibility: auto) {
background: url('https://cdn.xyz.com/content/images/desktop_banner_bg-updated.avif'),255) 100%);
}
}
由于content-visibility
的浏览器支持也很低,因此您可以检查浏览器是否支持它,如果是,则可以加载avif图像。
请注意:如果您加载avif,将无法显示它。
https://caniuse.com/?search=avif
https://caniuse.com/?search=content-visibility
它们具有类似的浏览器支持
还有一些非常古老的浏览器不支持@supports
。我建议使用<picture>
方法
根据caniuse Chrome版本85及更高版本提供的信息,支持avif
格式。考虑到这一点,您可以使用JavaScript实现基本的浏览器检测,并动态添加一个类,该类引用所需的文件格式:
HTML
<body>
<div class="banner"></div>
<script src="https://unpkg.com/bowser@2.10.0/es5.js"></script>
<script>
// Get the banner
const banner = document.querySelector('.banner');
// Initialize bowser and get the results
const { parsedResult } = bowser.getParser(window.navigator.userAgent);
// Isolate the browser
const { browser } = parsedResult;
// Get the version number and name for Chrome
const verNumber = Number(browser.version.split('.')[0]);
const browserName = browser.name;
// Conditionally load backgrounds
if (browserName == 'Chrome' && verNumber >= 85) {
banner.classList.add('banner-bg-avif');
} else {
banner.classList.add('banner-bg-jpg');
}
</script>
</body>
CSS
.banner {
height: 400px;
}
.banner-bg-jpg {
background-size: cover;
background-image: url('photo.jpg'),255) 100%);
}
.banner-bg-avif {
background-size: cover;
background-image: url('photo.avif'),255) 100%);
}
注意:general consensus似乎是本机用户代理检测有些不可靠,这就是本示例利用Bowser来改善浏览器检测的原因。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。