0

目前,我正在构建一个通过 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>

感谢您提供可能的解决方案,我非常感谢!

干杯,斯特凡

4

4 回答 4

0

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

于 2015-02-12T09:51:41.537 回答
0

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

也许您可以获取脚本并使其适应您的情况?

于 2015-02-12T09:51:42.427 回答
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. 现在,您实际上需要的是 property currentSrc,但请注意它需要与srcproperty 不同的处理方式,因为它是在加载图像后更新的(所以不要使用 resize,使用load)。

幸运的是,已经有一个名为 bgset 的简单lazySizes插件,它可以满足您的需要。在这里你可以找到一个演示,在这里你可以找到文档。当然,您也可以查看源代码并构建自己的源代码。

如果您想使用该插件,您的标记将更改为:

<div class="lazyload" data-bgset="1.jpg [(max-width: 30em)] | 2.jpg [(max-width: 48em)] | 3.jpg [(max-width: 80em)] | 4.jpg"></div>
于 2015-02-14T15:28:47.130 回答
0

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

于 2015-02-19T10:11:58.687 回答