Z索引的picturefill.js问题

Question

我正在使用picturefill来制作响应式图像。我遇到的问题是，我在ajax调用的成功回调中调用了picturefill()；方法。当动态加载时，调用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>

Answer 1

好了--终于弄明白了。所以我相信现在发生的事情是，保存我的图片的容器填充了图片和我的位置:绝对浮动元素在执行picturefill时丢失了它的宽度属性，因为我认为picturefill.js从DOM中删除了picturefill div，然后替换了它。

当它被移除时，容器元素，我已经设置为width:100%，没有任何内部给它一个实际的宽度，所以它折叠了一秒钟，我的固定位置元素消失了一秒钟。

为了防止这种情况，我将另一个位置:宽度为100%的绝对div放入容器中，然后将另一个位置:绝对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>