与 JS 或 jQuery 异步加载画廊缩略图答案

【问题标题】：Load gallery thumbnails async with JS or jQuery与 JS 或 jQuery 异步加载画廊缩略图
【发布时间】：2013-04-03 07:56:48
【问题描述】：

我在 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; ?>

我可以在后台加载缩略图而不阻塞页面的其余部分吗？

【问题讨论】：

图像总是由浏览器异步加载。 “卡住”究竟是什么意思？您是否正在尝试执行 JavaScript？
@elusive 您好，您可以看这里heseg.com/gallery/פורים-2012-בהישג/?lang=he，在加载缩略图之前，不会加载页面的其余部分（画廊导航）。
所以你想影响浏览器加载图片的顺序？
@elusive 是的，那会很棒。

标签： javascript jquery performance asynchronous

【解决方案1】：

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

【讨论】：