0

我正在尝试在 WordPress 模板中动态调用 backstretch.js。我正在使用带有转发器字段的高级自定义字段来设置每个部分的图像和 CSS 类。

我在 PHP 中构建数组，并使用 wp_localize_script() 对其进行本地化；

JS 对象如下所示：

Object
images : Object
    bkClass : Array[2]
        0 : "table"
        1 : "lounge"
    bkImage : Array[2]
        0 : "http://web.dev/wp-content/uploads/2017/02/table.jpg"
        1 : "http://web.dev/wp-content/uploads/2017/02/lounge.jpg"

backstretch 调用如下所示：

// Finds the <div> class and applies the correct image.
jQuery(document).ready(function($) {
    $(images).each(function(){
        $("." + this.images.bkClass).backstretch(this.images.bkImage);
    });
});

我检查了 HTML 输出，它是正确的。但是图像被应用于同一个div，并且图像在两者之间闪烁。

如果我手动调用 backstretch 它可以工作：

<script>
    jQuery(document).ready(function ($) {
        $(".table").backstretch("http://web.dev/wp-content/uploads/2017/02/table.jpg");
        $(".lounge").backstretch("http://web.dev/wp-content/uploads/2017/02/lounge.jpg");
    });
</script>

不太确定我哪里出错了。如果有人可以在这里帮助我，将不胜感激。

4

1 回答 1

0

尝试在窗口加载时使用而不是文档就绪，因为稍后会发生窗口加载事件，此时所有内容（例如图像）也已加载。

如果这不起作用，请尝试以下方式：

Javascript

jQuery(window).load(function ($) {
  var images = [];

  // iterate over your selection
  $('#background img').each(function () {
    // save source to list
    images.push(this.src);
  });

// use plugin
$.backstretch(images, {duration: 3000, fade: 750});
});

HTML

<div id="background">
  <img src="http://web.dev/wp-content/uploads/2017/02/table.jpg" />
  <img src="http://web.dev/wp-content/uploads/2017/02/lounge.jpg" />
</div>
于 2017-03-17T06:16:19.340 回答