目前,我正在构建一个通过 JavaScript 设置响应式背景图像的解决方案。我正在使用 Picturefill 创建跨浏览器支持。
我需要什么?我的页面上有一个元素需要一张非常小的背景照片。在页面上有一个图片元素,可以有条件地加载图像。但是,如果浏览器没有适当的图片元素支持,我指定了一个默认图像源。
使用 MooTools 我检查应该在 domready 上显示的照片,在调整窗口大小时我再次检查我的图像“src”以在需要时替换我当前的图片(用更大或更小的图片)。
在 FireFox 中,图片元素替换了 DOM 中的图像 'src',效果非常好!
Chrome(和 IE)不会替换图像“src”,因此我的照片将始终具有根据 MooTools 的默认照片尺寸。但是,当您通过 Chrome 开发人员工具将鼠标悬停在图像“src”上时,它确实会显示该媒体查询的正确图像源。
我可以得到太多细节,但相信我,我真的需要像上面提到的那样做,谁愿意帮助我呢?:)
<script>
var Placeholder = $('Placeholder');
var CoverImage = $('MyCover').getElement('img').src;
Placeholder.setStyle('background-image', 'url(' + CoverImage + ')');
var $timer = null;
window.addEvent('resize', function(){
var ResponsiveImage = function(){
var $ResponsiveImage = $('MyCover').getElement('img').src;
$('Placeholder').setStyle('background-image', 'url(' + $ResponsiveImage + ')');
};
clearTimeout($timer);
$timer = ResponsiveImage.delay(250, this);
});
</script>
<picture>
<source media="all and (max-width: 30em)" srcset="1.jpg">
<source media="all and (min-width: 30.063em) and (max-width: 48em)" srcset="2.jpg">
<source media="all and (min-width: 48.063em) and (max-width: 80em)" srcset="3.jpg">
<source media="all and (min-width: 80.063em)" srcset="4.jpg">
<img src="2.jpg">
</picture>
感谢您提供可能的解决方案,我非常感谢!
干杯,斯特凡