Question

我试图在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"

后伸电话看起来像这样：

// 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，图像在两者之间闪烁。

如果我手动呼叫后伸，它可以工作：

<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>

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

Answer 1

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

如果这不起作用，请尝试：

的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>

动态调用backstretch.js

1 个答案:

的Javascript

HTML