javascript - 与 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 替换为该属性值。