Слои укладки / перекрытия при начальной загрузке страницы

Question

Я разработал простой плагин для отображения сетки постов в блоге (изображение, заголовок и выдержка).Проблема - доля секунды при загрузке страницы, когда все элементы 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' ) );
}

Как мне скрыть весь этот скрипт до загрузки страницы?Или у вас есть другие возможные решения?

Спасибо