Question

我有两个页面正在使用页面顶部的绝对和相对定位元素。问题是较低的内容比标题内容更早出现，这会对这些页面造成闪烁效果：

http://test.icpm.biz/blog/index.html

http://test.icpm.biz/blog/article.html

Chrome中最引人注目。

CSS：

.single-article figure {
    position: relative;
    overflow: hidden;
    min-width: 100%;
    max-width: 100%;
    max-height: 550px;
    width: 100%;
    background: @black;
    text-align: center;
    margin-top: 0px;
    padding-top: 0px;
    -webkit-transform: translate3d(0, 0, 0);
}

.single-article figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: 1000;
    -webkit-transform: translate3d(0, 0, 0);
}

.block {
    position: absolute;
    max-height: 1px;
    width: 100%;
    z-index: 3000;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    -webkit-transform: translate3d(0, 0, 0);
}

HTML：

    <!DOCTYPE html>
<html class='no-js' lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta content='IE=edge' http-equiv='X-UA-Compatible'>
    <!-- Website Title -->
    <title>Institute of Certified Professional Managers</title>
    <!-- Metatag Info -->
    <meta content='' name='description'>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
    <!-- Favicon and Apple Icons -->
    <link href='img/favicon.png' rel='shortcut icon'>
    <link href='img/apple-touch-icon.png' rel='apple-touch-icon' sizes='57x57'>
    <link href='img/apple-touch-icon-72x72.png' rel='apple-touch-icon' sizes='72x72'>
    <link href='img/apple-touch-icon-114x114.png' rel='apple-touch-icon' sizes='114x114'>
    <!-- CSS Stylesheets -->
    <link href='css/style.css' rel='stylesheet'>
    <!-- Include Google Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Neuton:200,300,400,700,800' rel='stylesheet' type='text/css'>
    <script charset='ISO-8859-1' src='http://fast.wistia.com/assets/external/popover-v1.js'></script>
    <script src='js/modernizr-2.8.3.min.js'></script>
    <script src='js/respond.js'></script>
    <!--[if lt IE 9]> <script> document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('figure'); document.createElement('figcaption'); document.createElement('footer'); </script> <![endif]-->
  </head>
  <body>
    <!-- Featured Article -->
    <div class='single-article'>
      <figure>
        <img alt="Article Bg" data-src="<1043:bullet-proof-mobile.jpg, >1044:bullet-proof.jpg" data-src-base="img/article-bg/"/>
      </figure>
      <div class='block'>
        <div class='container'>
          <div class='row blog-logos'>
            <div class='col-12 show-mobile hide-tablet'>
              <div class='icpm-blog-logo'>
                <p>
                  <a href='index.html' title='Return to Homepage'>
                    <img alt='ICPM Logo' src='img/ICPM-Logo-Home.png'>
                  </a>
                </p>
              </div>
            </div>
            <div class='col-12 col-tablet-6'>
              <div class='mgmt-blog-logo'>
                <p>
                  <a href='index.html' title='Return to Homepage'>
                    <img alt='MGMT Blog Logo' src='img/mgmt-blog-logo.png'>
                  </a>
                </p>
              </div>
            </div>
            <div class='col-12 col-tablet-6 hide-mobile show-tablet'>
              <div class='icpm-blog-logo'>
                <p>
                  <a href='index.html' title='Return to Homepage'>
                    <img alt='ICPM Logo' src='img/ICPM-Logo-Home.png'>
                  </a>
                </p>
              </div>
            </div>
          </div>
          <div class='row'>
            <div class='col-12 col-desktop-9'>
              <h1><a href="article.html" title="Article Title">Bullet-Proofing your Career and Seeing what a Two Line Title Looks like</a></h1>
              <h4>Susan Mucha, CM</h4>
              <p>September, 24 2015</p>
            </div>
            <div class='col-3 hide-mobile show-desktop'>
              <p>&nbsp;</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Blog Articles -->
    <div class='container wrapper'>
      <div class='row'>
        <div class='col-12 col-tablet-6 col-desktop-4'>
          <div class='articles'>
            <figure class='effect-overlay'>
              <img alt='Bullet Proof Photo' src='img/article-bg/bullet-proof.jpg'>
              <figcaption>
                <div>
                  <h2>Bullet-Proofing Your Career</h2>
                  <h4>Susan Mucha, CM</h4>
                </div>
              </figcaption>
            </figure>
          </div>
        </div>
        <div class='col-12 col-tablet-6 col-desktop-4'>
          <div class='articles'>
            <figure class='effect-overlay'>
              <img alt='Mid Career Photo' src='img/article-bg/mid-career.jpg'>
              <figcaption>
                <div>
                  <h2>Why &amp; How to Make a Mid-Career Job Change</h2>
                  <h4>Tracey Renzi, CM</h4>
                </div>
              </figcaption>
            </figure>
          </div>
        </div>
        <div class='col-12 col-tablet-6 col-desktop-4'>
          <div class='articles'>
            <figure class='effect-overlay'>
              <img alt='Career Photo' src='img/article-bg/career.jpg'>
              <figcaption>
                <div>
                  <h2>Leaving the Military: Now What?</h2>
                  <h4>Sean Forney, CM</h4>
                </div>
              </figcaption>
            </figure>
          </div>
        </div>
        <div class='col-12 col-tablet-6 col-desktop-12'>
          <div class='articles'>
            <figure class='effect-overlay'>
              <img alt='Military Photo' src='img/article-bg/military.jpg'>
              <figcaption>
                <div>
                  <h2>3 Things They Didn't Tell me in College</h2>
                  <h4>Michael Davis, CM</h4>
                </div>
              </figcaption>
            </figure>
          </div>
        </div>
      </div>

Answer 1

这是因为您在元素中加载的图像没有任何尺寸。所以解决方案是：

a）为图中加载的图像提供尺寸，例如：

width="100%
height="550"

b）更好的是，不要给数字max-height:550px，而是height:550px，并将图像用作background-image并使用background-size:cover进行相应缩放

Answer 2

你可以使用jquery最初隐藏加载时间较长的元素，然后很好地淡化它们。

$(document).ready(function(){
 $(".myElement").delay(2000).fadeIn();
});

在你的CSS中

.myElement{
 display:none
}

此外，许多相对定位都是不必要的。

绝对定位导致闪烁

2 个答案: