响应的背景图像

时间:2015-02-12 09:38:47

标签: javascript html5 responsive-design mootools picturefill

目前,我正致力于构建一个通过JavaScript设置响应式背景图像的解决方案。我正在使用Picturefill来创建跨浏览器支持。

我需要什么?我的页面上有一个元素,需要一张非常小的背景照片。在页面上有一个图片元素,有条件地加载图像。但是,如果浏览器没有正确的图片元素支持,我指定了一个默认图像源。

使用MooTools我会检查应该在domready上显示的照片,在窗口调整大小时我会再次检查我的图像'src'以替换我当前的图片(如果需要的话)(更大或更小)。

在FireFox中,picture元素替换了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>

感谢可能的解决方案,我非常感激!

干杯, 斯蒂芬

4 个答案:

答案 0 :(得分:0)

也许我并不完全明白你要做什么,但是不是试图使用脚本来控制尺寸,而是为什么不使用CSS属性background-size: cover;呢?这就是我一直用于响应式背景图像而不是浏览器广泛支持的图像。

答案 1 :(得分:0)

你应该看看http://foundation.zurb.com/docs/components/interchange.html

也许你可以获得脚本并根据你的情况进行调整?

答案 2 :(得分:0)

首先是你的标记:

  1. 在图片中你不需要使用最小宽度和最大宽度。第一个匹配的源是使用媒体查询:

    <picture><source media="(max-width: 30em)" srcset="1.jpg">
    <source media="(max-width: 48em)" srcset="2.jpg">
    <source media="(max-width: 80em)" srcset="3.jpg">
    <source srcset="4.jpg">
    <img src="2.jpg"></picture>
    
  2. 现在,你需要的是属性currentSrc,但要注意它需要处理的不同于src属性,因为它在图像加载后被更新(所以不要使用调整大小,请使用load)。

  3. 幸运的是,已经存在一个名为bgset的简单lazySizes插件,它可以完全满足您的需求。在这里,您可以找到a demo,在这里找到the documentation。当然,您也可以查看源代码并构建自己的代码。

    如果您想使用该插件,您的标记会更改为以下内容:

    <div class="lazyload" data-bgset="1.jpg [(max-width: 30em)] | 2.jpg [(max-width: 48em)] | 3.jpg [(max-width: 80em)] | 4.jpg"></div>
    

答案 3 :(得分:0)

我使用currentSrc属性来获取更新的图像源,它就像一个魅力!谢谢大家的帮助!