使用JS或jQuery加载库缩略图异步

Question

我在WP网站中使用TN3图库（不是WP插件，而是jQuery库）。

在图库中，大图像会在您需要时加载，并且由于页面加载不会阻止，因此非常好。但缩略图全部加载（即使是那些不可见的缩略图），页面也会被粘住，直到所有页面都被加载。

$images = get_field('gallery_images');
if( $images ): ?>
  <div id="" class="mygallery">
    <ol class="">
      <?php foreach( $images as $image ): ?>

        <li>
          <?php if($image[$captionKey]): ?>
            <div class="tn3 description"><?php echo $image[$captionKey]; ?></div>
          <?php endif; ?>                        

          <a href="<?php echo $image['sizes']['large']; ?>">
            <?php echo wp_get_attachment_image( $image['id'], 'gallery-thumb' ); ?>
          </a>
        </li>

      <?php endforeach; ?>
    </ol>
  </div>
<?php endif; ?>

有没有我可以在后台加载缩略图而不会阻挡页面的其余部分？

Answer 1

作为变体，您可以插入缩略图1px图像并添加一些属性与真正的缩略图src。在jQuery事件中页面准备好之后，用该属性值替换所有缩略图src。