预加载随机背景图片

Question

我在 http2/apache/php7.3 环境中有一个以 divi 为主题的 wordpress 网站。我不擅长jquery。我已将背景放入生成以下标记的部分中

    <section id="random-clip" class="et_pb_module et_pb_fullwidth_header 
    et_pb_fullwidth_header_0 et_hover_enabled 
    et_pb_section_video et_pb_bg_layout_light et_pb_text_align_center" 
    style="background-image: url("/wp-content/uploads/media/fallback1.jpg"); 
    background-position-y: 35%;">...
    </section>

现在我想随机化这个背景，我使用下面的 jQuery 完成了这个，它放在关闭 body 标签之前。

 <script>
    //random background
    jQuery(document).ready(function($){
      var background = new Array ();
      background[0] = "/fallback1.jpg";
      background[1] = "/fallback2.jpg";
      background[2] = "/fallback3.jpg";
      var randombackground = Math.floor(Math.random() * background.length); 
      $("#random-clip.et_pb_fullwidth_header.et_pb_fullwidth_header_0").css({
'background-image': 'url(/wp-content/uploads/media' +background[randombackground] + ')',
    'background-position-y': '35%' });
    });
 </script>

这按预期工作，但我想稍微提高一下这个脚本的速度，因为由于某种原因，图像在文档加载后被调用并且没有准备好（可能是由于 cahin/defering/minification 插件），这使得在瀑布的尽头下载这些图像。由于我有一个隐藏加载的预加载器/微调器，这个随机脚本使微调器旋转超过需要..对此有什么建议吗？考虑到我在 http2 中，我正在考虑类似推送预加载的东西。 非常感谢

Answer 1

您正在准备编写客户端脚本。当 DOM（文档对象模型）被加载时，ready 事件发生。为避免任何延迟，您应该编写服务器端代码以在后台显示随机图像。

创建包含所有可能背景图像的数组。

$backgroundsArray = array('fallback1.jpg','fallback2.jpg','fallback3.jpg');   
echo '<pre>';var_dump($backgroundsArray);exit;

如果你 var_dumb 当前数组，那么你将看到以下输出。

array (size=3)
  0 => string 'fallback1.jpg' (length=13)
  1 => string 'fallback2.jpg' (length=13)
  2 => string 'fallback3.jpg' (length=13)

选择 0 到 2 之间的随机数

$RandomNumber = rand(0,2);
//$RandomNumeber will return value from 0 to 2.    
$BackgroundImage = $backgroundsArray[$RandomNumber];

<section id="random-clip" style="background-image: url("/wp-content/uploads/media/".$BackgroundImage .""); background-position-y: 35%;">


</section>