0

現在、レスポンシブな背景画像を JavaScript で設定するためのソリューションの構築に取り組んでいます。クロス ブラウザー サポートを作成するために、Picturefill を使用しています。

私が必要なものは何？私のページには、かなり小さな背景写真が必要な要素があります。ページには、条件付きで画像をロードする画像要素があります。ただし、ブラウザが適切な画像要素をサポートしていない場合は、デフォルトの画像ソースを 1 つ指定しました。

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

4 に答える 4

0

まず、あなたのマークアップ:

  1. ピクチャ ランドでは、min-width と max-width を使用する必要はありません。一致する最初のソースは、メディア クエリが使用されます。

    <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、プロパティとは異なる方法で処理する必要があることに注意してsrcください (サイズ変更を使用せず、 を使用してください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

何をしようとしているのかわからないかもしれませんが、スクリプトを使用して寸法を制御しようとする代わりに、代わりに 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 に答える