我开发了一个简单的插件来显示博客文章的网格(图像,标题和摘录)。问题是页面加载期间的瞬间,其中所有post div都完全堆叠在一起(重叠在顶部)。页面加载完成后,所有定位均正确呈现。
我想隐藏网格直到页面完全加载。有多个页面存在此网格(使用短代码)。调整窗口大小时,网格也会动态调整大小。
<?php
if ( ! class_exists( 'Featured_Sprout_Grid' ) ) {
class Featured_Sprout_Grid {
public function init() {
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ) );
add_image_size( 'fsgrid', 300, 180, true );
add_shortcode( 'fsgrid', array( $this, 'shortcode_handler' ) );
}
public function enqueue() {
wp_enqueue_style('fsgrid', plugins_url( '/css/style.css', __FILE__)
);
}
public function shortcode_handler($atts) {
extract(shortcode_atts(array(
'id' => null
), $atts, 'fsgrid'));
$post_ids = explode(",", strval($id));
$args = array(
'posts_per_page' => 100 ,
'orderby' => 'post__in',
'post__in' => $post_ids
);
return $this->grid($args);
}
public function grid($args) {
$grid = new WP_Query($args);
ob_start(); ?>
<script>
var setImageOpacity = function (opacity) {
var btn = document.createElement("style");
var t = document.createTextNode(".vw-post-loop.vw-post-loop- masonry-grid-3-col{opacity:" + opacity + ";}");
btn.appendChild(t);
document.body.appendChild(btn);
}
setImageOpacity(0);
</script>
<div class="vw-post-loop vw-post-loop-masonry-grid-3-col">
<div class="row">
<div class="col-sm-12">
<div class="vw-post-loop-inner vw-isotope vw-block-grid vw-block-grid-xs-1 vw-block-grid-sm-2 vw-block-grid-md-3" style="position: relative; height: 1875.97px;">
<?php $count = 1; if ( $grid->have_posts() ) : while( $grid->have_posts() ) : $grid->the_post(); ?>
<?php
$modulus = $count % 3;
?>
<div class="vw-block-grid-item" style="position: absolute; left: 0px; top: 0px;">
<div class="vw-post-box vw-post-style-block vw-post-style- masonry vw-post-format-standard">
<?php if ( has_post_thumbnail() ) : ?>
<a class="fsgrid-thumbnail" href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('fsgrid'); ?>
</a>
<?php endif; ?>
<div class="fsgrid-post-categories">
<?php vw_the_category(); ?>
</div>
<h4 style="font-size:26px;line-height:1.2em;word-break:break-word;margin:10px 0 10px 0;">
<a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a>
</h4>
<p class="fsgrid-meta">
<?php the_excerpt(); ?>
<div class="fsgrid-cta">
<a href="<?php the_permalink(); ?>">Read More <span class="arrow_right_alt"> </span></a>
</div>
</div>
</div>
<?php unset($class); $count++; endwhile; wp_reset_postdata(); endif; ?>
</div>
</div>
</div>
</div>
<script>
window.addEventListener("load", function (event) {
setImageOpacity(1);
});
</script>
<?php return ob_get_clean();
}
}
$FeaturedSproutGrid = new Featured_Sprout_Grid;
add_action( 'init', array( $FeaturedSproutGrid, 'init' ) );
}
如何隐藏整个脚本,直到页面加载完毕?还是您还有其他可能的解决方案?
谢谢