因此，我没有像往常一样在单击时加载循环，而是像往常一样加载循环，而是检索图像的URL并将其收集到数据属性中。然后，我已经在循环中使用了它，而没有实际加载图像（真正的问题是谁的体重）。

单击或任何事件-然后我将存储的字符串提供给src 的属性img

这让我的页面负载从14mb增加到了1.2mb。

HTML/PHP任意

// start loop // WP_Query

<div class="slideshow-image"
    <img
    data-image-url="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>"
    src="<?php bloginfo(\'template_directory\'); ?>/images/blank.gif" 
    alt="slideshow image" />
</div>

// end loop

jQuery

// load slideshow image only after you click
$("#porthole-slideshow-link").on(\'click\', function() {

  $(\'.slideshow-image img\').each( function() {

    var imageUrl = $(this).attr("data-image-url");
    $(this).attr(\'src\', imageUrl);

  });

});

更多：我将这一想法付诸于许多不在循环中的事情，因此我只能加载最重要的资产，然后在DOM加载之后，在网站结构完成后，加载社交按钮（在本例中是大按钮）等。

HTML

<img
class="load-me-after-dom"
data-image-url="http://example.com/images/my-huge-image.png"
src="http://example.com/images/blank.gif"
alt="my description" />

jQuery

$(\'.load-me-after-dom\').each( function() {
  var imageUrl = $(this).attr("data-image-url");
  $(this).attr(\'src\', imageUrl);
});