1

レスポンシブ画像を作成するためにpicturefillを使用しています。私が抱えている問題は、picturefill（）を呼び出していることです。ajax呼び出しの成功コールバックのメソッド。動的にロードされると、picturefillが呼び出されます。

これは問題なく機能しますが、問題は、画像で塗りつぶされた画像が、その上にオーバーレイされているすべての要素を約1秒間覆ってしまうことです。オーバーレイされた要素が突然表示されるため、これは不快な効果を引き起こします。つまり、要素が消え、要素が画像で塗りつぶされた画像の下から再表示されるというシーケンスです。

他の誰かがこの問題に遭遇しましたか、そして誰かが私がそれをどのように扱うことができるかについて何か提案がありますか？私はすでに画像で塗りつぶされた画像のz-indexをz-index：1に変更し、他のすべてをz-index：200に変更しようとしましたが、それでもうまくいきませんでした。

コードの追加：

  <!-- Begin centerimage Container -->


            <!-- Begin rightcaption -->
          <div class="rightcaption">

        OVERLAID CAPTION

          </div>
          <!-- End rightcaption -->   

<!-- Begin flip-container -->
<div class= "flip-container">
        <div class= "flipper">
            <div class= "front">
          <div class="main-pic-wrap" id="bloop">

          <div data-picture data-alt="name" data-class="relative_image">
            <div data-src=source> </div> 
            <div data-src=img2%> data-media="(min-width: 480px)"></div>
            <div data-src=img3%> data-media="(min-width: 767px)"></div>

            <!--[if (lt IE 9) & (!IEMobile)]>
            <div data-src="medium.jpg"></div>
            <![endif]-->

            <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
            <noscript>
                <img src=img3 alt="Image of Activity">
            </noscript>
          </div>
          </div>



            </div>
            <div class = "back">
                <div id="map"></div>
            </div>

        </div>
    <!-- End flipper -->
    </div>
    <!-- End flip-container container -->



<div id="moreShowHideGroup">
    <div id="mapShowHide" class="icon-globe"></div>
</div>

4

1 に答える 1

0

わかりました - ついにそれを理解しました。したがって、picturefill.js が DOM から picturefill div を削除してから置き換えます。

削除されている間、幅:100% に設定したコンテナー要素には、実際の幅を与えるための内部要素がないため、一瞬折りたたまれ、固定位置の要素が一瞬消えます。

これを防ぐために、幅 100% の別の position:absolute div をコンテナーに配置し、別の position:absolute div をこの新しいコンテナーにドロップしました。したがって、構造は次のようになります。

    <div class="main" style="position:relative"> 
      <div data-picture data-alt="name">div data-src=source> </div></div>
      <div class="always-here" style="position:absolute" top:0; left:0;>
        <div class="fixed" style="position:absolute; top:2%; left:2%; ">
        </div>
      </div>
    </div>
于 2013-02-07T08:35:46.420 に答える