sha*_*han 11 javascript css responsive-images
我整晚都在阅读,似乎无法得出任何具体的答案,说明最好的办法是什么.两件事情,我知道这样做的工作是these-
使用图像包装器和这样的<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的答案,以便加载正确的图像.这适用于每个浏览器的所有最新版本,并且非常容易实现.
首先,我在开始<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>旧版浏览器的标签进行安全回退.
编辑＃2：迄今为止更新的进展： https ://jsfiddle.net/c5hy0g8r/11
问题仍然是，在慢速网络条件下，使用 css 'content' 属性仍然会像图像通常那样以块的形式加载。onload="imageLoaded(this)" 的常用方法不适用于其内容由 css content: url('img.jpg') 属性生成的 img 或图片。
您可以使用<picture>具有一个或多个<source>属性设置为图像源的元素，当设置为有效媒体查询列表的相应属性与环境匹配时srcset，应显示该图像源。<img>media
在元素onload发生事件时<img>，将父元素设置opacity为0; 用于对从到的元素requestAnimationFrame()进行动画处理。opacity01
<!DOCTYPE html>
<html>
<head>
<style>
.imageWrapper {
opacity: 0;
}
</style>
</head>
<body>
<picture class="imageWrapper">
<source srcset="http://lorempixel.com/50/50/technics" media="(min-width: 0px) and (max-width:150px)">
<source srcset="http://lorempixel.com/50/50/city" media="(min-width: 151px) and (max-width: 300px)">
<source srcset="http://lorempixel.com/50/50/nature" media="(min-width: 301px) and (max-width:450px)">
<source srcset="http://lorempixel.com/50/50/sports" media="(min-width: 451px) and (max-width:600px)">
<source srcset="http://lorempixel.com/50/50/animals" media="(min-width: 601px)">
<img width="50px" height="50px" onload="imageLoaded(this)" src="null" alt="">
</picture>
<figcaption></figcaption>
<script>
const num = 1/60;
var fx = null;
var caption = document.querySelector("figcaption");
var imageLoaded = (img) => {
caption.innerHTML = "";
cancelAnimationFrame(fx);
var n = 0;
var imgWrapper = img.parentNode;
imgWrapper.style.opacity = 0;
fx = requestAnimationFrame(function animate() {
console.log(n);
if (n < 1) {
n += num;
imgWrapper.style.opacity = n;
fx = requestAnimationFrame(animate);
} else {
caption.innerHTML = img.currentSrc.slice(img.currentSrc.lastIndexOf("/") + 1);
console.log("complete");
}
})
}
</script>
</body>
</html>
plnkr http://plnkr.co/edit/RWSc6J3kUUJPUZsrpagi?p=preview