我的网站有一些。在“我的联系人”页面的最开始处设置动画的PNG图像。这些图像有点重（因为它们有透明的背景），所以动画开始时会在动画期间加载其中一些图像，看起来很糟糕。
所以，为了修复它，我必须添加这一行<link rel="preload" as="image" href="url-of-the-image.png"/> 到<head>.
为了实现它，我使用Snippets plugin. 如果我没弄错的话，这个片段应该是这样的：
add_action( \'wp_head\', function () { ?>
function my_custom_js() {
echo \'<link rel="preload" as="image" href=href="url-of-the-image.png"/>\';
}
<?php } );
问题是，同一个页面（我的联系人页面）对于移动设备是不同的：它不使用这些页面。PNG图像，因为手机加载时间太长。
这就引出了我的问题：Is there a way to exclude mobile devices from the preloading tag I must add to the head?
最合适的回答,由SO网友:Ernest 整理而成
好吧，那么I ended up using "prerender" instead of "preload" 因为它适合我的情况（prerender在用户访问目标页面之前开始呈现目标页面，在我的情况下，它更适合，因为我想要预加载的页面不是首页）。
对于任何有兴趣了解预加载或预取响应能力的人，the property "media" 就是你要找的。应该是这样的：
<link rel="preload" as="image" href="imageURLhere.png" media="(min-width: 768px)"/>
。。。或者，如果要将整个页面作为预呈现的目标，请执行以下操作：
<link rel="prerender" href="targetPageURL/" media="(min-width: 768px)">
这样只会
preload 或
prerender 如果视口位于
media 条件范围。
希望有帮助！干杯
