优先 window.load 个函数

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

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

将加载幻灯片的代码放入

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

$(window).load 会等待页面加载所有元素，这些元素是您 javascript 工作所需要的，因为您必须确保您已经在代码中引用了这些元素存在于 DOM。要链接函数，请从前一个块的最后一个块调用每个下一个函数

Answer 3

您可以将它们组合在一个 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,

      });
    }
});

优先 window.load 个函数

Prioritizing window.load functions

javascript

jquery

preloader

onload