1

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

这很好用，但问题是图片填充的图片覆盖了覆盖在它上面的所有元素大约 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

好吧——终于想通了。所以我相信正在发生的事情是保存我的图片填充图片和我的位置的容器：绝对浮动元素在执行图片填充时失去了它的宽度属性，因为我认为图片填充.js从DOM中删除了图片填充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>
于 2013-02-07T08:35:46.420 回答