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完成了此任务，该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>

这可以按预期工作，但我想提高此脚本的速度，由于某种原因，在加载文档且未准备好之后调用图像（可能是由于cahing / deffering / minification插件），这使得在瀑布的尽头下载这些图像。由于我有一个预加载器/旋转器隐藏了onload的事实，这个随机脚本使旋转器旋转得比需要的更多。.对此有什么建议吗？考虑到我在http2中，我在考虑类似push preload之类的事情。非常感谢

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>

预加载随机背景图片

1 个答案: