我整晚都在看书，似乎无法就最好的方法是什么给出任何具体的答案。我知道 起作用的两件事是:
加载图片时淡入淡出:
使用图像包装器和 <img>像这样的标签:
<div class="imageWrapper">
<img src="img.jpg" alt="" onload="imageLoaded(this)">
</div>
CSS 看起来像
.imageWrapper {
opacity: 0
}
.loaded {
opacity: 1
}
然后在你的 js 文件中有类似的东西
var imageLoaded = (img) => {
var imgWrapper = img.parentNode;
imgWrapper.className += ' loaded';
}
用于根据屏幕尺寸加载不同的图像
@media screen only and (min-device-width: 0) and (max-device-width: 450px) {
.backgroundImage {
background: url('small_background_image.jpg');
}
}
@media screen only and (min-device-width: 451px) and (max-device-width: 1024px) {
.backgroundImage {
background: url('medium_background_image.jpg');
}
}
@media screen only and (min-device-width: 1025px) {
.backgroundImage {
background: url('large_background_image.jpg');
}
}
我的问题
我可以分别做这两件事(加载图像时淡入淡出，当浏览器检测到较小的屏幕尺寸时更改背景图像)，但我似乎做不到找到一个包含两者的解决方案。我需要能够为不同的屏幕尺寸指定不同的图像，并且还能够检测何时加载该图像并将其淡入。
有什么好的方法吗？
我的解决方案:
我最终使用了 guest271314 的变体的 answer为了加载正确的图像。这适用于每个浏览器的所有最新版本，并且非常容易实现。
首先，我在我的开头 <body> 下面放置了一个内联脚本标记，以便如果我的浏览器加载我的 js 文件很慢，它可以立即加载图像。
<body>
<script>
function imageLoaded(img) {
if ((" " + img.className + " ").indexOf(" "+'loaded'+" ") > -1 ) {
return true;
} else {
img.className += ' loaded';
}
}
</script>
然后我有我的 <picture>像这样标记:
<picture class="backgroundContainer">
<source srcset="img-1024.jpg" media="(min-width: 0px) and (max-width:1024px)">
<source srcset="img-1920.jpg" media="(min-width: 1025px) and (max-width: 1920px)">
<source srcset="img-2560.jpg" media="(min-width: 1921px)">
<img class="backgroundImage" onload="imageLoaded(this)" src="img-1920.jpg" alt="">
</picture>
我的 sass 看起来像这样:
@keyframes fadeIn
0%
opacity: 0
100%
opacity: 1
.backgroundContainer
width: 100%
height: 100%
.backgroundImage
opacity: 0
.loaded
opacity: 1
animation: fadeIn 3s
这允许浏览器(不考虑速度)等到正确大小的图像加载完成，然后在 3s 上淡入淡出。 , 使用 <img> 进行安全回退旧浏览器的标记。
最佳答案
I basically need to be able to fade in a
background-imagewhen it loads, or be able to change an<img>tag's src before it loads depending on screen size, or do something that incorporates both of these things using a method I'm unaware of.
您可以使用 css content值设置为 url() 的属性具有要显示的图像 URL 的功能，或更改显示的图像源； css animation , @keyframes淡入background-image当源图像加载时。
html
<picture class="backgroundImage"></picture>
CSS
.backgroundImage {
opacity: 0; /* set `opacity` to `0` */
width: 50px;
width: 50px;
content: url(http://lorempixel.com/50/50/technics); /* set intial image */
animation-name: fadein;
animation-iteration-count: 1;
animation-duration: 2500ms;
animation-fill-mode: both;
}
@keyframes fadein {
to {
opacity: 1; /* fade in image */
}
}
/* set media queries */
@media screen only and (min-device-width: 0) and (max-device-width: 450px) {
.backgroundImage {
opacity: 0; /* set `opacity` to `0` */
content: url(http://lorempixel.com/50/50/cats); /* set image */
animation-name: first;
}
@keyframes first {
to {
opacity: 1; /* fade in image */
}
}
}
@media screen only and (min-device-width: 451px) and (max-device-width: 1024px) {
.backgroundImage {
opacity: 0; /* set `opacity` to `0` */
content: url(http://lorempixel.com/50/50/city); /* set image */
animation-name: second;
}
@keyframes second {
to {
opacity: 1; /* fade in image */
}
}
}
@media screen only and (min-device-width: 1025px) {
.backgroundImage {
opacity: 0; /* set `opacity` to `0` */
content: url(http://lorempixel.com/50/50/sports); /* set image */
animation-name: third;
}
@keyframes third {
to {
opacity: 1; /* fade in image */
}
}
}
jsfiddle https://jsfiddle.net/yayd5Lma/3
关于javascript - 加载后淡入背景图像(无 jquery)，同时仍使用媒体查询替换不同屏幕尺寸的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39716354/