Question

我正在使用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>

Answer 1

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

当它被移除时，我设置为宽度的容器元素：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>

picturefill.js与z-index的问题

1 个答案: