图像覆盖在图像前加载了一秒钟

我试图在使用Wordress get_posts()从我的博客拉出的帖子列表上获得一个简单的图像覆盖图。到目前为止，我的叠加层可以工作，但是在图像加载之前它会加载一秒，并且会导致难以看到的红色效果，其中每个图像应该在页面加载时出现。图像覆盖在图像前加载了一秒钟

我想知道是否有办法解决这个问题，任何人都不会有任何建议如何防止这种情况。

这是我的代码：

<div class="post-container"> 
    <?php 
    $args = array('posts_per_page' => 5); 
    $myposts = get_posts($args); 
    foreach ($myposts as $post) : setup_postdata($post); 
     ?> 
     <div class="post-box"> 
      <div class='post-img-overlay'> 
       <div class='post-img' style="background-image:url('<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)) ?>');"></div> 
      </div> 
      <a class='post-title' href="<?php the_permalink(); ?>"><?php the_title(); ?></a> 
      <p><?php the_excerpt(); ?></p> 
      <a class='read-more' href="<?php the_permalink(); ?>">Read more</a> 
     </div> 
     <?php 
    endforeach; 
    wp_reset_postdata(); 
    ?> 
</div>

只是一个简单的WordPress的循环是在主页上获得5个帖子和信息与每个并将其显示在自己的div。

图像重叠部分是在这里：

<div class='post-img-overlay'> 
    <div class='post-img' style="background-image:url('<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)) ?>');"></div> 
</div>

其背后的CSS是在这里：

.post-img{ 
    height:300px; 
    width: 100%; 
    background-size:cover; 
    transition : opacity 500ms ease-out; 
    -webkit-transition : opacity 500ms ease-out; 
    -moz-transition : opacity 500ms ease-out; 
    -o-transition : opacity 500ms ease-out; 
} 
.post-img:hover { 
    opacity: 0.5; 
} 
.post-img-overlay { 
    background-color: red; 
    max-width: 100%; 
    max-height: 300px; 
}

它的工作原理在这里我jsfiddle：http://jsfiddle.net/javacadabra/nphL3Lj5/5/但是当我使用上面的代码有一些PHP实际上动态拉图像我得到的图像之前加载一秒钟的覆盖。

任何帮助非常感谢！

来源

2015-12-08 Javacadabra

你可以翻转周围的事物，就像这样：

.post-img { 
    height: 300px; 
    width: 100%; 
    background-size: cover; 
    background-color: red; 
    opacity: 0; 
    transition: opacity 500ms ease-out; 
    -webkit-transition: opacity 500ms ease-out; 
    -moz-transition: opacity 500ms ease-out; 
    -o-transition: opacity 500ms ease-out; 
} 

.post-img-overlay { 
    background: url('http://img.thesun.co.uk/aidemitlum/archive/01440/Suzuki-motorbike_1440345a.jpg'); 
    max-width: 100%; 
    max-height: 300px; 
} 

.post-img:hover { 
    opacity: 0.5; 
}

来源

2015-12-09 06:18:15

图像覆盖在图像前加载了一秒钟

回答

相关问题