javascript - picturefill.js 问题与 z-index

Question

我正在使用 picturefill 制作响应式图片。我遇到的问题是我正在调用 picturefill(); ajax调用成功回调的方法。当动态加载时，picturefill 被调用。

这工作正常，但问题是 picturefill 的图片覆盖了覆盖在它上面的所有元素大约 1 秒钟。这会导致不舒服的效果，因为重叠的元素会突然出现。所以顺序是我们看到元素，元素消失，然后元素从 picturefill'd 图片下重新出现。

有没有其他人遇到过这个问题，有没有人对我如何处理它有任何建议？我已经尝试将填充图片的 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

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

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

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