Question

对不起，如果这是一个菜鸟问题（我是一个JS菜鸟）。我正在一个网站上工作，其中主页包含预加载器和幻灯片。

我设法设置了预加载器和幻灯片。但是，我注意到它们都在同时加载。我需要找到一种方法来首先加载预加载器，一旦预加载完成，然后开始幻灯片放映。

我在两个函数上都使用（window）.load但我想知道是否有办法优先处理区域的加载方式。

这是我的工作代码：

jQuery(window).load(function() { 

  jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");

  setTimeout(wptime_plugin_remove_preloader, 3000);
  function wptime_plugin_remove_preloader() { 
  jQuery('#wptime-plugin-preloader').remove();
  }

});

jQuery(window).load(function() {

  $('#slideshow.royalSlider').royalSlider({
    arrowsNav: true,
    loop: true,
    keyboardNavEnabled: true,
    controlsInside: false,
    imageScaleMode: 'fill',
    arrowsNavAutoHide: false,
    autoScaleSlider: false, 
    numImagesToPreload: 0,
    transitionSpeed: 600,
    thumbsFitInViewport: false,
    navigateByClick: false,
    startSlideId: 0,
    transitionType:'fade',
    globalCaption: false,

  });

});

此致

约翰

Answer 1

您可以将它们组合在一个jQuery(window).load内，并选择在删除预加载器后在wptime_plugin_remove_preloader函数内运行royalSlider设置函数：

jQuery(window).load(function() { 
  //set up the preloader
  jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");

  setTimeout(wptime_plugin_remove_preloader, 3000);

  function wptime_plugin_remove_preloader() { 
      //Remove the preloader
      jQuery('#wptime-plugin-preloader').remove();

      //Set up the slider after removing the preloader
      $('#slideshow.royalSlider').royalSlider({
        arrowsNav: true,
        loop: true,
        keyboardNavEnabled: true,
        controlsInside: false,
        imageScaleMode: 'fill',
        arrowsNavAutoHide: false,
        autoScaleSlider: false, 
        numImagesToPreload: 0,
        transitionSpeed: 600,
        thumbsFitInViewport: false,
        navigateByClick: false,
        startSlideId: 0,
        transitionType:'fade',
        globalCaption: false,

      });
    }
});

Answer 2

在window.onload上激活预加载器并从预加载函数内部调用幻灯片放映功能（注意：未经测试！）：

jQuery(window).load(function() { 

  jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");

  setTimeout(wptime_plugin_remove_preloader, 3000);
  function wptime_plugin_remove_preloader() { 
  jQuery('#wptime-plugin-preloader').remove();
  }
slideshow();
});

function slideshow() {

  $('#slideshow.royalSlider').royalSlider({
    arrowsNav: true,
    loop: true,
    keyboardNavEnabled: true,
    controlsInside: false,
    imageScaleMode: 'fill',
    arrowsNavAutoHide: false,
    autoScaleSlider: false, 
    numImagesToPreload: 0,
    transitionSpeed: 600,
    thumbsFitInViewport: false,
    navigateByClick: false,
    startSlideId: 0,
    transitionType:'fade',
    globalCaption: false,

  });

}

Answer 3

将加载幻灯片的代码放在

中

function wptime_plugin_remove_preloader() { 
      jQuery('#wptime-plugin-preloader').remove();
      //slideshow code here
  }

$(window).load会等待页面加载您需要使用javascript所需的所有元素，因为您必须确保您在代码中引用的元素已经存在于DOM中。对于链函数，从前一个

的最后一个块中调用每个下一个函数

优先考虑window.load函数

3 个答案: